TanStack Query란?
tanStack Query는 서버로부터 데이터 가져오기, 데이터 캐싱, 캐시 제어 등 데이터를 쉽고 효율적으로 관리할 수 있는 라이브러리입니다.
주요 기능
- 데이터 페칭 및 캐싱 → 서버에서 데이터를 가져오고 저장
- 동일 요청의 중복 제거 → 같은 데이터를 여러 번 요청하지 않음
- 신선한 데이터 유지 → 자동으로 데이터를 최신 상태로 유지
- 무한 스크롤, 페이지네이션 최적화 → 효율적인 데이터 페칭 지원
- 자동 갱신 → 네트워크 재연결, 요청 실패 시 자동으로 다시 요청
TanStack Query를 사용할 때는 queryKey를 설정합니다.
이 키 값을 기준으로 "서버에서 데이터를 가져올지" 또는 "캐싱된 데이터를 사용할지" 결정합니다.
하지만 한 번 캐시된 데이터가 계속 유지되는 것은 아닙니다.
이때 데이터를 어떻게 관리할지를 결정하는 것이 staleTime과 gcTime입니다.
staleTime과 gcTime의 차이
staleTime (데이터가 신선한 상태로 유지되는 시간)
TanStack Query는 캐싱한 데이터를 신선(Fresh)하거나 상한(Stale) 상태로 구분해 관리합니다.
캐싱된 데이터가 신선하다면 캐시된 데이터를 사용하고, 만약 데이터가 상했다면 서버에 다시 요청해 신선한(새로운) 데이터를 가져옵니다.
이때, 데이터가 상하는 데까지 걸리는 시간을 지정하는 옵션이 staleTime입니다. 이 시간이 지나기 전에는 추가 네트워크 요청 없이 캐시 데이터를 사용합니다.
즉, staleTime은 캐싱된 데이터가 신선한 상태로 유지되는 시간을 설정하는 옵션입니다.
예시
- staleTime 기본값: 0ms (즉시 Stale 상태)
- staleTime이 5분이면?
→ 데이터를 가져온 후 5분 동안은 네트워크 요청 없이 캐시 데이터를 사용 - staleTime이 지나면?
→ 데이터가 Stale 상태가 되고, 이후 refetch가 트리거되면 새로운 데이터를 요청
useQuery(["user", userId], fetchUserData, { staleTime: 300000 }); // 5분위 설정에서는 데이터를 가져온 후 5분 동안은 새롭게 요청하지 않고, 캐시 데이터를 사용합니다.
gcTime (캐시가 유지되는 시간)
gcTime은 해당 쿼리가 더 이상 사용되지 않을 때, 캐시 데이터가 메모리에 얼마나 더 남아 있을지를 정하는 시간입니다.
staleTime이 지나면 데이터는 '상한' 상태가 되지만, 여전히 캐시된 데이터는 사용이 가능합니다. 이 캐시 데이터는 새로운 요청을 보내 신선한 데이터를 받아오기 이전에 임시로 기존 데이터를 표시하는 데 활용됩니다.
다만, 해당 쿼리가 사용되지 않게 된 시점으로부터 gcTime으로 설정된 시간이 지나면 캐시에서 데이터가 삭제됩니다.
즉, gcTime은 해당 쿼리가 더 이상 사용되지 않을 때, 캐시 데이터가 메모리에 남아 있는 시간을 설정하는 옵션입니다.
예시
- gcTime 기본값: 5분
- gcTime이 10분이면? → 해당 데이터를 사용하던 컴포넌트가 언마운트된 후 10분 동안 캐시에 유지
- gcTime이 지나면? → 캐시에서 데이터가 제거됨 (필요하면 다시 서버 요청)
useQuery(["user", userId], fetchUserData, { gcTime: 600000 }); // 10분위 설정에서는 쿼리를 사용하던 컴포넌트가 언마운트된 후 10분 동안 캐시가 유지됩니다.
요약
| 개념 | staleTime | gcTime |
|---|---|---|
| 역할 | 캐시된 데이터가 신선한 상태로 유지되는 시간 | 캐시가 메모리에 남아 있는 시간 |
| 기본값 | 0ms (즉시 Stale) | 5분 |
| 동작 | staleTime이 지나면 Stale 상태가 되어 refetch 시 새로운 데이터 요청 | gcTime이 지나면 캐시에서 데이터 제거 |
| 영향 | staleTime이 길면 불필요한 네트워크 요청을 줄일 수 있음 | gcTime이 길면 캐시 데이터가 오래 유지되어 다시 요청할 때 빠름 |
staleTime은 데이터가 신선한 상태를 유지하는 시간을 결정, 이 시간 동안에는 refetch 없이 캐시 데이터 사용
gcTime은 캐싱된 데이터가 상해도 데이터는 메모리에 보관되는데, 완전히 데이터가 제거되는데 걸리는 시간, gcTime이 지나면 캐시에서 삭제됨
