프로젝트를 진행하면서 Next.js 환경에서 API 연동 작업을 진행 하면서 로딩 처리나 에러 핸들링등 필요한 값들을 어떤 방식으로 처리하면 좋을까 찾아 보다 React-Query와 SWR 이라는 상태관리 라이브러리를 찾게 되었다.

해당 게시글에서는 두 라이브러리의 차이점과 React-Query를 선택한 이유를 적어 보려고 한다.

React-Query

주요 기능

• 캐싱: React Query는 데이터 캐싱을 자동으로 처리하여, 네트워크 요청을 줄이고 애플리케이션의 성능을 높인다.
• 자동 재요청: 데이터가 변경되거나 오래된 경우, 자동으로 최신 데이터를 가져온다.
• 백그라운드 업데이트: 데이터가 백그라운드에서 업데이트되어 사용자 경험을 개선한다.
• 변이 (Mutation): 데이터 업데이트를 위한 변이 기능을 제공한다.
• 개발자 도구: Devtools를 통해 데이터 상태를 시각적으로 확인하고 디버깅 할 수 있다.

장점

• 풍부한 기능과 설정 옵션.
• 변이와 같은 강력한 기능 제공.
• 뛰어난 개발자 도구 지원.

단점

• 러닝 커브가 비교적 가파를 수 있다.
• 작은 프로젝트에서는 오버헤드가 될 수 있다.
• 라이브러리 크기가 상대적으로 크다 (약 16.3 KB).

사용 예시

import { useQuery, useMutation, QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const fetchData = async () => {
  const response = await fetch('/api/data');
  return response.json();
};

const MyComponent = () => {
  const { data, error, isLoading } = useQuery('fetchData', fetchData);

  if (isLoading) return 'Loading...';
  if (error) return 'An error occurred';

  return <div>{data}</div>;
};

const App = () => (
  <QueryClientProvider client={queryClient}>
    <MyComponent />
  </QueryClientProvider>
);

SWR