2nd/00_Raw/TanStack Query.md

TanStack Query

📌 Brief Summary

TanStack Query(또는 React Query)는 클라이언트 측 애플리케이션 상태와 근본적으로 다른 '서버 상태(server state)'를 관리하기 위한 사실상의 표준(de facto standard) 라이브러리입니다 [1]. API에서 가져온 데이터의 캐싱, 동기화, 로딩 및 에러 사이클 처리를 지원하며 무한 스크롤이나 낙관적 업데이트(optimistic updates)와 같은 복잡한 기능을 단순화합니다 [1, 2]. 복잡한 Redux 구현을 대체하여 프론트엔드 상태 관리를 효율적으로 리팩토링하는 데 핵심적인 역할을 합니다 [3].

📖 Core Content

• 서버 상태(Server State)의 분리 관리: 현대 프론트엔드 개발에서는 전역 상태 관리에서 서버 상태와 클라이언트 상태를 분리하는 것이 중요한 변화로 자리 잡았습니다. TanStack Query는 데이터 캐싱, 동기화, 로딩/에러 사이클 관리 등 서버 데이터 처리에 특화되어 사용됩니다 [1].
• 강력한 캐싱과 성능 최적화: 중복되는 네트워크 요청을 줄여주고 데이터가 항상 최신 상태를 유지할 수 있도록 보장하는 견고한 캐싱 레이어를 제공하여 애플리케이션의 성능을 향상시킵니다 [2].
• 확장 가능한 폴더 구조와의 결합: 확장성 있는 프론트엔드 아키텍처에서는 API 계층을 명확히 구분합니다. TanStack Query를 활용한 요청 선언(request declarations)과 커스텀 훅(custom hooks)은 관련 기능(feature) 폴더 내에 함께 배치(colocated)하는 것이 권장됩니다. 이 방식은 네트워크 로직을 UI 컴포넌트와 철저히 분리하여 코드의 유지보수성을 크게 높여줍니다 [2].
• 리팩토링 및 타 상태 관리 라이브러리와의 시너지: 레거시 React 코드베이스를 리팩토링할 때, 기존의 Redux를 제거하고 서버 상태 관리를 TanStack Query로 이관하는 것이 훌륭한 전략으로 제시됩니다. 서버 상태를 제외하고 남은 전역 클라이언트 상태는 Context API나 Zustand를 활용해 관리하는 것이 모범 사례로 여겨집니다 [3].

🔗 Knowledge Connections

• Related Topics: Server State, State Management, Zustand, Redux, Context API
• Projects/Contexts: React Codebase Refactoring, Engineering Scalable Frontend Systems
• Contradictions/Notes: 소스 내에서 상충하는 의견은 발견되지 않습니다. 대신, 과거의 거대한 단일 상태 관리(Redux 등) 방식에서 벗어나, 서버 상태는 TanStack Query에 위임하고 클라이언트 상태는 Zustand 등으로 분리하여 다루는 것이 2025년 기준 확장 가능한 프론트엔드 아키텍처의 핵심 원칙으로 강조되고 있습니다 [1, 3, 4].

---

Last updated: 2026-04-26