React Query 캐싱

React Query를 써보면 제일 먼저 느끼는 게 있다.

“어, 이거 다시 안 불러오네?”

그게 바로 캐싱이다.

캐시가 하는 일

React Query는 서버에서 받아온 데이터를 메모리에 저장한다.

같은 queryKey로 다시 요청하면, 서버에 가지 않고 캐시 데이터를 바로 보여준다.

그 사이 백그라운드에서 새 데이터를 살짝 받아와 최신 상태로 유지한다.

즉, 화면은 빠르고 데이터는 최신이다.

두 개만 기억하면 된다

• staleTime: 데이터가 "stale" 상태로 간주되는 기간을 지정
  • 데이터가 "stale" 상태란, 이전 쿼리 결과가 캐시되어 있지만, 그 결과가 일정 시간 동안 업데이트되지 않은 상태
• cacheTime: 캐시가 메모리에 남아있는 기간

staleTime이 지나면 데이터는 오래된(stale) 상태가 되고,

다시 쿼리가 실행될 때 새로 요청한다.

cacheTime이 지나면 캐시 자체가 메모리에서 사라진다.

실무에서 자주 쓰는 패턴

• 자주 안 바뀌는 데이터 → staleTime: Infinity
• 액션 후 바로 새로고침 필요할 때 → invalidateQueries
• 탭 이동 후에도 데이터 유지하고 싶을 때 → cacheTime 늘리기

React Query 캐싱은 단순히 ‘데이터 저장’이 아니라

사용자 경험을 부드럽게 만들어주는 핵심 기능이다.

staleTime이랑 cacheTime만 이해해도 절반은 끝난다.