React Query 캐시 전략에 대한 고찰
프론트엔드
React Query 캐시 전략에 대한 고찰
두줄요약
React Query의 staleTime, gcTime, 키 팩토리, 무효화 전략을 중심으로 캐시 운영법을 정리했습니다. 전역 기본값과 직접 갱신을 통해 불필요한 재요청과 화면 깜빡임을 줄이는 방법을 제안했습니다.
핵심 내용
- React Query 캐시 전략의 핵심을 서버 상태와 클라이언트 상태 구분에서 설명
- staleTime과 gcTime의 의미, 재요청 발생 조건, 기본값으로 인한 반복 요청 문제 정리
- 전역 defaultOptions, 쿼리 키 팩토리, invalidateQueries, setQueryData, optimistic update, prefetch, Devtools 활용 제안
주의할 점
- staleTime을 훅마다 흩뿌리면 기준이 사라지고 중복 요청이 늘어남
- 조회 키와 무효화 키가 어긋나면 등록 후 목록 갱신이 누락될 수 있음
- 일부 화면만 수동 패칭을 쓰면 캐시 일관성이 깨질 수 있음
적용해볼 점
- 데이터 성격에 따라 staleTime과 gcTime을 분류해 전역 기준선부터 설정
- 쿼리 키를 팩토리로 일원화해 조회와 무효화를 같은 규칙으로 관리
- 변경 응답은 setQueryData로 직접 반영하고, 필요 시 optimistic update와 prefetch 활용