[TanStakQuery] 비교(Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router)

"이 비교표는 가능한 한 정확하고 편견 없이 작성하기 위해 노력했습니다. 이러한 라이브러리를 사용하면서 정보가 개선될 수 있다고 생각되면 이 페이지 하단의 "Github에서 이 페이지 수정하기" 링크를 사용하여 메모 또는 주장에 대한 증거와 함께 변경 사항을 제안해 주세요."

Feature/Capability Key:

• ✅ 1st-class, 추가 구성이나 코드 없이 바로 사용할 수 있는 최고 수준의 빌트인
• 🟡 Supported, 하지만 비공식적인 제3자 또는 커뮤니티 라이브러리/컨트리뷰션으로 지원
• 🔶 Supported and documented, 하지만 구현하기위해 추가 사용자 코드가 필요
• 🛑 공식적으로 지원되거나 문서화되지 않음

Notes

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

"2 렌더링 최적화(Render Optimization) - React Query는 뛰어난 렌더링 성능을 제공합니다. 기본적으로 어떤 필드에 액세스했는지 자동으로 추적하고 그 중 하나가 변경되는 경우에만 다시 렌더링합니다. 이 최적화를 사용하지 않으려면 notifyOnChangeProps를 all로 설정하면 쿼리가 업데이트될 때마다 컴포넌트를 다시 렌더링합니다. 예를 들어 새로운 데이터가 있거나 로딩 중임을 알리기 위해서입니다. 또한 React Query는 여러 컴포넌트가 동일한 쿼리를 사용할 때 애플리케이션이 한 번만 다시 렌더링하도록 업데이트를 일괄 처리합니다. 데이터 또는 오류 프로퍼티에만 관심이 있는 경우 notifyOnChangeProps를 ['data', 'error']로 설정하면 렌더링 횟수를 훨씬 더 줄일 수 있습니다."

"3 부분 쿼리 매칭(Partial query matching) - React Query는 결정론적 쿼리 키 직렬화(deterministic query key serialization)를 사용하기 때문에 매칭하려는 개별 쿼리 키를 일일이 알 필요 없이 가변 쿼리 그룹을 조작할 수 있습니다. 예를 들어, 변수에 관계없이 키에 todos로 시작하는 모든 쿼리를 refetch하거나 변수 또는 중첩된 속성이 있는(또는 없는) 특정 쿼리를 대상으로 할 수 있으며 필터 기능을 사용하여 특정 조건을 통과하는 쿼리만 매칭할 수도 있습니다."

"4 사용 전 쿼리 구성(Pre-usage Query Configuration) - 쿼리 및 변형을 사용하기 전에 어떻게 작동할지 구성할 수 있는 멋진 이름입니다. 예를 들어, 쿼리를 미리 기본값으로 완전히 구성해 두었다가 사용할 때가 되면 매번 사용할 때마다 페처 및/또는 옵션을 전달할 필요 없이 useQuery({ queryKey })만 호출하면 됩니다. SWR에는 기본 페처를 미리 구성할 수 있도록 하여 이 기능의 부분적인 형태가 있지만, 쿼리 단위가 아닌 전역 페처로만 사용할 수 있으며 변이에 대해서는 절대 사용할 수 없습니다."

"5 변이 후 자동 리페칭(Automatic Refetch after Mutation) - 변이가 발생한 후 진정한 자동 리페치를 수행하려면 라이브러리가 해당 스키마에서 개별 엔티티와 엔티티 유형을 식별하는 방법을 파악하는 데 도움이 되는 휴리스틱과 함께 (그래프QL이 제공하는 것과 같은) 스키마가 필요합니다."

"6 정규화된 캐싱(Normalized Caching) - React Query, SWR 및 RTK-Query는 현재 일부 상위 수준의 데이터 중복을 피하기 위해 엔티티를 플랫 아키텍처에 저장하는 것을 설명하는 자동 정규화된 캐싱(automatic-normalized caching)을 지원하지 않습니다."

"7 SWR의 불변 모드(SWR's Immutable Mode) - SWR은 캐시 수명 동안 쿼리를 한 번만 가져올 수 있는 "immutable" 모드를 제공하지만, 여전히 스타일 타임이나 조건부 자동 유효성 검사 개념이 없습니다."

"8 React 라우터 캐시 지속성(React Router cache persistence) - React 라우터는 현재 일치하는 경로를 넘어서는 데이터를 캐시하지 않습니다. 경로가 남으면 해당 데이터는 손실됩니다."

Reference

• Comparison | TanStack Query Docs