SWR과 React Query 비교: 적합한 도구 선택

SWR은 gzip으로 압축했을 때 약 7kb입니다. React Query v5는 약 13kb입니다. 이 크기 차이는 React Query가 제공하는 추가 기능인 쿼리 미리 가져오기, 쿼리 취소, 더 상세한 쿼리 수명 주기, 기본 제공 DevTools를 반영합니다.

크기에 민감한 애플리케이션이나 단순한 가져오기-표시 패턴에서는 SWR의 더 작은 크기가 의미 있는 장점입니다.

SWR은 더 단순하고 간결한 API를 제공합니다. 주된 요구 사항이 데이터를 가져와 자동으로 재검증하면서 표시하는 것이라면, SWR은 반복 코드를 거의 작성하지 않고도 이를 깔끔하게 처리합니다.

Vercel이 개발한 SWR은 Next.js와 특히 잘 통합됩니다. getServerSideProps 또는 getStaticProps를 사용한 사전 가져오기와 대체 데이터를 통한 클라이언트 측 재검증을 함께 활용할 수 있습니다.

사전 가져온 데이터를 SWRConfig의 fallback 옵션 또는 useSWR의 fallbackData 옵션으로 SWR에 전달합니다. SWR은 이 데이터를 초기 캐시 값으로 사용하므로 첫 로드 시 깜박임을 없애면서 백그라운드 재검증을 수행할 수 있습니다.

이 패턴은 Vercel을 사용하는 Next.js Pages Router 애플리케이션에 권장되는 데이터 가져오기 방식입니다.

React Query는 쿼리 수명 주기를 더 세밀하게 제어할 수 있습니다. staleTime, gcTime(가비지 컬렉션), refetchOnWindowFocus, 재시도 횟수 및 재시도 지연 시간을 각각 설정할 수 있습니다. onSuccess, onError, onSettled 콜백을 사용하는 변이 시스템도 표현력이 뛰어납니다.

React Query는 AbortSignal을 통한 쿼리 취소도 지원하므로 입력할 때마다 검색하는 사용자 인터페이스에 유용합니다.

React Query의 useInfiniteQuery와 getNextPageParam은 무한 스크롤 및 더 보기 패턴에 맞게 설계되었습니다. 페이지 커서 처리를 관리하고 평면형 또는 구조화된 pages 객체를 제공합니다.

SWR에는 비슷한 기능을 제공하는 useSWRInfinite이 있지만, 조금 더 하위 수준의 API이므로 페이지를 더 많이 수동으로 조합해야 합니다.

React Query에서는 queryClient.prefetchQuery를 사용해 마우스를 올리거나 경로가 변경될 때 쿼리를 미리 가져올 수 있습니다. 컴포넌트가 마운트되기 전에 데이터가 캐시에 저장되므로 즉시 렌더링되는 경험을 제공합니다.

SWR에는 SSR 대체 데이터 외에 기본 제공 미리 가져오기 API가 없습니다. 마우스를 올릴 때 미리 가져오는 기능이 필요하다면 React Query가 더 적합한 선택입니다.

React Query v5는 useQuery가 isLoading 대신 isPending을 반환하도록 변경하고, 낙관적 업데이트 패턴을 통합했으며, TypeScript 타입 추론을 개선해 API를 단순화했습니다. v5 API는 이전 버전보다 더 깔끔하고 일관적입니다.

React Query를 검토한다면 v4를 배운 뒤 마이그레이션하기보다 처음부터 v5를 대상으로 학습하십시오.

SWR은 기본값을 위한 SWRConfig 설정 외에 별도의 제공자 설정 없이 키를 기준으로 컴포넌트 전체에서 캐시 항목을 전역적으로 공유합니다. React Query에는 QueryClient 인스턴스를 사용하는 QueryClientProvider가 필요합니다.

빠른 프로토타이핑이나 단순한 애플리케이션에서는 설정이 필요 없는 SWR의 전역 캐시를 더 빠르게 구성할 수 있습니다. React Query의 명시적인 클라이언트는 복잡한 캐시 요구 사항이 있는 대규모 애플리케이션에 더 적합합니다.

애플리케이션이 주로 Next.js를 기반으로 하고, 데이터 가져오기 패턴이 단순하며(가져오기-표시-재검증), 번들 크기를 최소화하고 싶거나 팀이 고급 기능보다 API의 단순성을 중시한다면 SWR을 선택하십시오.

대규모 마이그레이션 없이 기존 코드베이스에 점진적으로 데이터 가져오기 라이브러리를 도입하려는 경우에도 SWR은 훌륭한 선택입니다.

무한 스크롤, 쿼리 미리 가져오기, 백그라운드 재요청 전략, 여러 단계의 쿼리 의존성 또는 세밀한 캐시 TTL 제어와 같은 복잡한 서버 상태 관리가 필요하다면 React Query를 선택하십시오.

React Query에는 더 활발한 미들웨어 및 DevTools 생태계도 있으며, queryClient를 독립적으로 더 쉽게 테스트할 수 있습니다.

일부 팀은 두 도구를 모두 사용합니다. 말단 컴포넌트에서 단순한 단일 리소스 가져오기에는 SWR을 사용하고, 미리 가져오기가 필요한 복잡한 다중 쿼리 페이지에는 React Query를 사용합니다. 흔한 방식은 아니지만 팀이 두 API 모두에 능숙하다면 유효한 선택입니다.

하지만 더 일반적으로는 문맥 전환과 두 의존성을 관리하는 추가 부담을 피하기 위해 하나를 선택하고 애플리케이션 전체에 일관되게 적용합니다.

SWR과 React Query의 번들 크기는 대략 어떻게 비교됩니까?

SWR(~7kb)은 더 단순하고 Next.js와 자연스럽게 통합되며, 대부분의 가져오기-표시 패턴을 적은 코드로 처리합니다. React Query(~13kb)는 무한 쿼리, 미리 가져오기, 세밀한 수명 주기 콜백, 쿼리 취소와 같은 더 풍부한 기능을 제공합니다.

단순성과 Next.js 프로젝트에는 SWR을 선택하고, 복잡한 서버 상태 요구 사항에는 React Query를 선택하십시오. 두 도구 모두 TypeScript, Suspense, SSR 및 오프라인 패턴을 지원합니다.