TanStack Query

🟦 TanStack Query란?

서버 상태를 쉽게 패칭, 캐싱, 동기화, 업데이트할 수 있게 해주는 React 데이터 관리 라이브러리

• 기존 상태 관리 도구는 클라이언트 상태에 집중
• TanStack Query는 서버에서 가져온 데이터의 상태를 효율적으로 관리

📌 캐싱이란?

자주 사용하는 데이터를 미리 저장해서 빠르게 사용하는 기술

• 매 요청마다 서버에서 데이터를 받는 대신, 한 번 받아온 데이터를 저장
• 네트워크 요청 횟수 감소 → 빠른 화면 전환, 더 나은 사용자 경험

🟡 캐싱 전략의 핵심: SWR (Stale-While-Revalidate)

<aside> 📖

stale을 사전에 검색해 보면 신선하지 않은, 오래된이라는 뜻을 가지고 있다.

</aside>

• 기존 데이터를 먼저 보여주고, 백그라운드에서 최신 데이터를 가져오는 전략

• 사용자 경험 향상: 로딩 시간 없이 즉시 응답 가능

• 예시 흐름:

  fresh → stale → refetch → fresh

🗂️ 캐시의 상태 흐름 (📌 이미지 슬라이드: 첫 번째 그림)

• fetching: 서버에서 데이터를 가져오는 중
• fresh: staleTime 동안은 신선한 상태
• stale: staleTime 만료되면 이 상태로 이동
• inactive: 컴포넌트가 언마운트 되었을 때
• deleted: gcTime 만료로 GC 처리됨