React Query VS SWR VS Apollo VS RTK 쿼리 비교

비교표는 React Query 소개페이지에서 확인할 수 있습니다. https://react-query.tanstack.com/comparison

포스팅의 내용은 모두 React Query Docs의 내용과 제 사견으로 이루어져 있습니다. 이해하기에 부족하거나 빠진 내용이 있을 수 있을 수 있으므로 더 자세한 내용을 확인하시고 싶으시다면 공식 Doc 을 참고해 주시면 감사하겠습니다.

분석

지연된 쿼리 데이터 (Lagged Query Data)

React Query 는 다음 쿼리가 로드되는 동안 기존 쿼리의 데이터를 계속 볼 수 있는 방법을 제공합니다. (서스펜스가 곧 기본적으로 제공할 동일한 UX와 유사)
새 쿼리가 요청 될 때마다 hard loading 상태를 표시하지 않으려는 페이지 매김 UI 또는 무한로딩 UI를 작성할 때 이는 매우 중요합니다. 다른 라이브러리에는 이 기능이 없으며 새 쿼리가 로드되는 동안 새 쿼리에 대해 hard loading 상태를 렌더링합니다. (prefetched 된 경우 제외)

렌더링 최적화 (Render Optimization)

React Query 는 뛰어난 렌더링 성능을 제공합니다. 쿼리가 업데이트될 때만 구성 요소를 다시 렌더링 합니다. 예를들어 새 데이터가 있거나 또는 가져오는 중임을 나타냅니다. 또한 React Query는 업데이트를 함께 배치하여 여러 구성요소가 동일한 쿼리를 사용할 때 응용 프로그램이 한 번만 다시 렌더링되도록 할 수 있습니다. 데이터 또는 오류 속성에만 관심이 있는 경우 OnChangeProps 를 [‘data’, ‘error’] 로 설정하여 렌더링 수를 더욱 줄일 수 있습니다. notifyOnChangeProps: ‘tracked’ 를 설정하여 액세스되는 필드를 자동으로 추적하고 필드 중 하나가 변경된 경우에만 다시 렌더링 합니다.

부분 쿼리 일치 (Partial query matching)

React Query는 결정론적 쿼리 키 일련화를 사용하기 때문에 일치시킬 각 개별 쿼리 키를 알 필요가 없이 쿼리 변수 그룹을 조작할 수 있습니다. 예를들어, 변수에 관계없이 해당 키에 있는 작업 대상으로 시작하는 모든 쿼리를 다시 가져올 수 있으며, 변수 또는 중첩된 속성을 가진(또는 포함하지 않은) 특정 쿼리를 대상으로 지정할 수 있으며, 필터 함수를 사용하여 특정 조건을 통과하는 쿼리만 일치시킬 수도 있습니다.

사용전 쿼리 구성 (Pre-usage Query Configuration)

이것은 단순히 Query와 Mutations가 사용되기전에 어떻게 동작할지를 구성할 수 있다는것을 나타내는 멋진 이름입니다. 예를들어 쿼리를 사전에 기본값으로 완전히 구성할 수 있으며, 사용할 때마다 Fetcher 및/또는 options 를 전달하는 대신에 useQuery(key)만 사용하면 됩니다. SWR에는 기본 Fetcher를 미리 구성할 수 있지만 쿼리별로 구성할 수 없고 Mutations(변형)를 위한 것이 아닌 전역 Fetcher로서만 가능합니다.

Mutation 이후 자동 리페치 (Automatic Refetch after Mutatio)

Mutation 이 발생한 후에 자동 ReFectching 을 발생하려면 라이브러리가 해당 스키마에서 개별 entities 및 etities 유형을 식별하는 방법을 알 수 있도록 돕는 휴리스틱과 함께 스키마가 필요합니다.

표준화 캐싱 (Normalized Caching)

React Query 및 SWR은 현재 상위 수준의 데이터 중복을 방지하기 위해 entities를 flat 아키텍처에 저장하는 것을 설명하는 자동 정규화된 캐싱을 지원하지 않습니다.

TypeScript

React Query는 TypeScript로 작성할 수 있으며 라이브러리와 프로젝트가 Type에 안전한지 확인합니다.

유의사항:

Type은 현재 TypeScript v3.8 이상을 사용해야합니다. 저장소의 타입 변경은 non-breaking 으로 간주되며, 일반적으로 패치 서버 변경으로 릴리즈됩니다. (그렇지 않을 경우, 모든 타입 향상 기능이 Major 버전이 됩니다.) React Query 패키지 버전을 특정 패치 릴리즈로 잠그고 모든 릴리스 간에 타입이 수정되거나 업그레이드 될 수 있음을 예상하여 업그레이드하는 것이 좋습니다. React Query 의 non-type-related (비 유형 관련) 공개 API는 여전히 semver를 매우 엄격하게 따릅니다.

사용자 지정 Hooks 정의

사용자 지정 Hooks를 정의 할 때, 결과 및 오류에 대한 타입을 지정해야합니다. 예를들면 다음과 같습니다.

 function useGroups() {
   return useQuery<Group[], Error>('groups', fetchGroups)
 }

<Group[], Error> 을 이용해 결과배열의 타입과 오류시의 타입을 동시에 지정하고 있습니다.

GraphQL

React Query 의 가져오기 메커니즘은 Promise를 기반으로 구축 되었기 때문에 GraphQL을 포함한 모든 비동기 데이터 가져오기(fetching) 클라이언트와 함께 React Query를 사용할 수 있습니다.

React Query 는 정규화된 캐싱을 지원하지 않습니다. 대다수의 사용자는 실제로 정규화된 캐시가 필요하지 않거나, 자신이 믿는 만큼의 혜택을 받지 못하지만, 이를 보장 할 수 있는 매우 드문 상황이 있을 수 있으므로 먼저 React Query 팀에게 확인하여 진짜인지 확인하십시요.

React Native

React Query 는 현재 React DOM 에서만 지원되는 devtools를 제외하고 React Native에서 즉시 작동하도록 설계되었습니다.

다음편에 계속..