Skip to content

React Query 설명

Jump to bottom
Won Kim edited this page Oct 24, 2024 · 1 revision

React Query는 서버 상태를 관리하기 위한 훌륭한 도구입니다. 클라이언트 애플리케이션이 서버로부터 데이터를 가져오고, 캐싱하며, 업데이트하고, 동기화하는 과정을 쉽게 관리하도록 도와줍니다. React Query를 사용하면 비동기 작업을 좀 더 효율적으로 처리할 수 있으며, 로딩, 오류 처리, 캐싱, 데이터 무효화 등의 복잡한 상태를 간단하게 관리할 수 있습니다.

육하원칙(6W1H)에 기반한 설명

  1. What (무엇)
    React Query는 데이터 패칭, 캐싱, 동기화, 서버와의 상호작용을 효율적으로 관리하는 라이브러리입니다. API를 호출하고, 그 결과를 상태로 관리하고, 캐싱, 리패칭, 오류 처리 등을 간편하게 할 수 있습니다.

  2. Why (왜)
    서버로부터 데이터를 패칭할 때는 여러 가지 복잡한 작업이 필요합니다. 예를 들어:

    • 데이터를 가져오는 동안 로딩 상태를 관리해야 함
    • 데이터를 가져오는 도중 오류가 발생하면 이를 처리해야 함
    • 데이터를 여러 곳에서 중복해서 요청하지 않도록 캐싱이 필요함
    • 데이터가 변경되었을 때 자동으로 갱신해야 함

    이러한 문제들을 React Query가 자동으로 관리해주기 때문에 코드의 복잡도를 크게 줄여줍니다.

  3. Where (어디에)
    서버에서 데이터를 자주 패칭해야 하는 모든 클라이언트 애플리케이션에서 사용할 수 있습니다. 특히 리액트 기반 애플리케이션에서 매우 유용하며, 서버와의 상호작용이 많은 대규모 애플리케이션에서 그 장점이 두드러집니다.

  4. When (언제)
    서버 상태를 클라이언트에서 관리해야 할 때 사용됩니다. 특히 다음과 같은 상황에서 React Query는 매우 유용합니다:

    • 서버에서 데이터를 패칭할 때
    • 동일한 데이터를 여러 컴포넌트에서 사용할 때 (캐싱 및 동기화)
    • 실시간 데이터 갱신이 필요할 때
    • 데이터의 무효화와 갱신이 필요한 경우

  5. Who (누가)
    서버와 클라이언트 간의 데이터 동기화가 필요한 프론트엔드 개발자가 주로 사용합니다. 리액트 애플리케이션을 개발하는 모든 사람이 사용할 수 있으며, 특히 API와 통신이 빈번한 프로젝트에서 필수적인 도구입니다.

  6. How (어떻게)
    React Query를 사용하면 useQuery, useMutation 같은 훅을 이용해 서버와의 통신을 간편하게 처리할 수 있습니다. 이 훅들은 데이터를 패칭하고, 캐시하며, 오류를 처리하고, 데이터를 갱신하는 로직을 자동으로 관리합니다.

예제 코드

간단한 예제로, 유저 목록을 가져오는 API를 사용해 보겠습니다.

1. React Query 설치

먼저, 패키지를 설치합니다.

npm install @tanstack/react-query

2. React Query 설정

// _app.tsx (Next.js 예제)
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import type { AppProps } from 'next/app';

const queryClient = new QueryClient();

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

3. 데이터 패칭 예제

// components/UserList.tsx
import { useQuery } from '@tanstack/react-query';

const fetchUsers = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  if (!res.ok) {
    throw new Error('Network response was not ok');
  }
  return res.json();
};

export default function UserList() {
  const { data, error, isLoading } = useQuery(['users'], fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (error instanceof Error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map((user: any) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

핵심 개념

  • useQuery: 데이터를 패칭하고, 캐싱하며, 상태(로딩, 오류 등)를 관리합니다.
  • queryKey: 캐싱할 데이터의 식별자로, React Query는 이 키를 기준으로 데이터를 캐싱하고, 필요할 때 데이터를 리패칭합니다.
  • isLoading: 데이터가 로드되는 동안 로딩 상태를 나타냅니다.
  • error: 패칭 중에 발생한 오류를 처리합니다.
  • data: 패칭된 데이터를 담고 있습니다.

왜 React Query를 안 쓰면 안 되는 상황이 있을까?

대규모 애플리케이션에서 데이터를 효율적으로 관리하지 않으면 다음과 같은 문제를 겪을 수 있습니다:

  • 여러 컴포넌트에서 같은 데이터를 중복 요청하여 불필요한 네트워크 트래픽 발생
  • 데이터가 업데이트되었을 때, 수동으로 갱신 로직을 처리해야 하는 번거로움
  • 비동기 처리의 복잡성이 커지고, 로딩 상태나 오류 처리가 일관되지 않음

React Query는 이러한 문제를 해결해주고, 데이터 패칭과 상태 관리를 일관성 있게 할 수 있는 강력한 도구입니다.

결론

React Query는 서버와 클라이언트 간의 데이터 패칭과 상태 관리를 크게 단순화해주는 도구로, 대규모 애플리케이션에서 필수적일 수 있습니다. 이를 통해 API 통신과 관련된 많은 문제들을 해결하고, 더 나은 사용자 경험을 제공합니다.

Clone this wiki locally