React Query로 API 데이터 관리 자동화하기

React 프로젝트에서 API 데이터를 관리하는 것은 복잡하고 반복적인 작업일 수 있습니다. 상태 관리, 캐싱, 리패칭 등을 직접 구현하기보다 React Query를 활용하면 자동화된 데이터 관리를 쉽게 할 수 있습니다.

1. React Query란?

React Query는 서버 상태 관리를 간편하게 해주는 라이브러리입니다. 데이터 패칭, 캐싱, 백그라운드 리패칭, 에러 핸들링 등 비동기 데이터를 효율적으로 다룹니다.

2. React Query 설치와 기본 사용법

먼저 React Query와 필수 의존성인 react-query 패키지를 설치합니다.

npm install @tanstack/react-query

기본적인 사용법은 QueryClient와 QueryClientProvider를 최상위 컴포넌트에 설정한 뒤, useQuery 훅을 이용해 데이터를 요청합니다.

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Posts />
    </QueryClientProvider>
  );
}

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json());
}

function Posts() {
  const { data, error, isLoading } = useQuery(['posts'], fetchPosts);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading posts.</p>;

  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

3. React Query의 주요 기능

- 자동 캐싱: 똑같은 쿼리에 대해 네트워크 요청을 최소화합니다.

- 백그라운드 자동 리패칭: 데이터 최신성을 자동으로 유지합니다.

- 에러 및 로딩 상태 관리: 별도의 상태 코드 없이 간단히 처리합니다.

4. 실무 팁

- 쿼리키를 명확히 정의해 캐시 충돌을 방지하세요.

- 필요 시 staleTime, cacheTime 등 옵션을 조절해 성능을 최적화하세요.

- React Query Devtools 를 활용해 상태를 시각적으로 파악하세요.

npm install @tanstack/react-query-devtools

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Posts />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

React Query 도입으로 API 데이터 관리 업무를 대폭 단순화하고 코드 가독성과 유지보수성도 크게 개선할 수 있습니다. 실무 프로젝트에 꼭 활용해 보시길 바랍니다.