🔄TanStack Query 기술 문서

useInfiniteQuery의 동작 원리와 Cursor 기반 무한 스크롤 구현법, 그리고 select 옵션을 활용한 데이터 다이어트 및 성능 최적화 전략을 배웁니다.

useEffect 페칭의 한계를 깨닫고, Server State와 Client State의 명확한 분리를 통해 TanStack Query의 필요성을 이해합니다.

전역 캐시를 파편화 없이 계층적으로 설계하는 기법과, 실무의 꽃인 Query Key Factory 패턴(및 Query Options API)을 도입하여 타입 안정성을 확보합니다.

Query Key의 배열 컨벤션부터 status와 fetchStatus의 차이까지, useQuery의 기본 동작 원리를 완벽하게 통제하는 방법을 배웁니다.

로컬 try-catch의 한계를 넘어서, QueryCache 단위의 전역 에러 핸들링과 React Error Boundary 결합을 통한 최상의 에러 방어망(Defensive UX) 구축을 다룹니다.

staleTime과 gcTime의 차이를 완벽히 통달하고, Structural Sharing을 통해 불필요한 리렌더링을 막아내는 원리를 이해합니다.

폭포수(Waterfall) 페칭을 피하는 방법과 `enabled` 옵션을 활용하여 의존적인 데이터를 안전하게 가져오는 방법을 배웁니다.

React 19+ 시대의 표준인 useSuspenseQuery를 활용하여 로딩 상태(Spinner)를 컴포넌트 외부로 선언적으로 던지고(Throw), 워터폴을 우회하는 병렬 페칭 전략을 배웁니다.

서버 데이터를 수정하는 Mutation의 기초와, 수정 후 클라이언트 캐시를 스마트하게 갱신(무효화)하는 invalidateQueries의 설계 철학을 배웁니다.

서버가 푸시하는 양방향 실시간 이벤트(Socket/SSE)를 React Query의 QueryCache에 가장 경량화되고 안전하게 주입하는 두 가지 갈림길을 배웁니다.

React Hook Form과 React Query를 충돌 없이 결합하는 노하우와, 네트워크가 끊긴 오프라인 상황에서도 동작하는 오프라인 퍼스트(Offline-First) UX를 설계합니다.

서버 응답을 기다리지 않고 UI를 먼저 업데이트하여 앱의 체감 속도(UX)를 극대화하는 기법과 에러 롤백 매커니즘을 배웁니다.

컴포넌트 내부에 산재한 useQuery 로직을 커스텀 훅과 queryOptions API로 분리하여 재사용성과 타입 안정성을 극대화하는 방법을 다룹니다.

React Query 환경에 특화된 프론트엔드 테스트 구축법, QueryClient 격리 패턴, 그리고 MSW를 결합한 완벽한 네트워크 모킹(Mocking) 전략을 배웁니다.

React Query를 전역 상태 관리자처럼 쓰는 것에 대한 오해를 바로잡고, Server State와 Client State를 완벽하게 분리하는 아키텍처를 설계합니다.

React Query를 최신 Next.js App Router(RSC) 환경에 탑재할 때 필수적인 QueryClientProvider 싱글톤 세팅 전략과 메모리 릭 방지법을 다룹니다.

서버가 미리 구워준 데이터 캐시를 클라이언트 캐시로 어떻게 안전하게 넘겨주어(Hydration), 클라이언트의 불필요한 스피너를 완벽 삭제하는지 배웁니다.