핵심 요약
사람인은 멘토링 매치 서비스의 서버 데이터 관리에 React Query를 도입해 캐시와 동기화, 업데이트 흐름을 일관되게 처리합니다.
구현 방법
- @tanstack/react-query의 QueryClient/Provider를 구성하고 refetchOnWindowFocus=false, retry=0로 설정
- useQuery에 staleTime Infinity를 적용해 비변경 데이터를 오래 캐시
- useInfiniteQuery로 페이징 구현, getNextPageParam으로 다음 페이지 판단
- useMutation으로 업데이트 시 invalidateQueries 또는 setQueryData로 즉시 반영
- _app.jsx에 Devtools 및 글로벌 설정 적용
주요 결과
- 캐시 기반 데이터 신선도 유지 및 리패치 관리가 간소화
- 데이터 무효화/부분 업데이트로 UX와 개발 생산성 향상
