프론트엔드
React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)
두줄요약
SWR과 React Query로 서버 상태를 Redux의 전역 상태와 분리하는 방식을 설명했습니다. 조건부 요청, 캐시 갱신, 재검증 옵션과 두 라이브러리의 사용 차이를 비교했습니다.
구조와 흐름
- Local·Global·Server State 분리와 서버 상태 전용 data fetching 라이브러리의 역할
- SWR의 key·fetcher·options와 React Query의 query key·query client 기반 데이터 관리
- 조건부 요청, 무효화 후 재조회, 직접 캐시 갱신, 포커스·재연결·주기 기반 refetch 흐름
선택 이유
- Redux 미들웨어 기반 비동기 처리의 장황함과 Global·Server State 혼재 해소
- 동일 API 요청 중복 방지와 서버 데이터 동기화 자동화
- 두 프로젝트의 개발 컨텍스트 통일을 위한 SWR에서 React Query로의 전환
주의할 점
- React Query 배열 query key의 항목 순서에 따른 별도 키 처리
- 데이터 변경 빈도와 세션 특성에 맞춘 staleTime·refetch 주기·포커스 옵션 조정
- 직접 데이터 갱신과 invalidate 후 refetch 방식의 상황별 구분
적용해볼 점
- 프로필 수정 후 SWR mutate 또는 React Query invalidateQueries로 관련 데이터 무효화
- 이미 변경 결과를 아는 경우 mutate 데이터 인자 또는 setQueryData 기반 즉시 캐시 갱신
- 공통 fetcher와 기본 옵션을 전역 config로 관리하고 React Query Devtools 활용
