React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)
프론트엔드
React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)
두줄요약
SWR과 React Query로 서버 상태를 선언적으로 관리하는 방식을 비교했습니다. 조건부 요청, 캐시 갱신, 재검증 옵션의 차이를 정리했습니다.
구조와 흐름
- Local·Global·Server State 분리와 서버 상태 전용 data fetching 라이브러리의 역할
- SWR·React Query의 쿼리 키, fetcher, 캐시 기반 중복 요청 방지와 백그라운드 동기화
선택 이유
- Redux 미들웨어 기반 비동기 처리의 장황함과 Global State·Server State 혼재 해소
- 선언적 데이터 요청과 데이터 갱신 시점 관리 단순화
장단점
- SWR의 null·falsy 키 기반 조건부 요청과 mutate 기반 재검증·캐시 갱신
- React Query의 enabled 옵션, invalidateQueries·setQueryData 기반 제어
- React Query 배열 키의 순서 민감성 및 객체 키의 순서 비민감성
적용해볼 점
- 포커스 복귀·네트워크 재연결·주기적 갱신 옵션을 통한 최신 데이터 유지
- 세션 유지 화면에서 포커스 시 refetch 설정 검토
- 공통 fetcher와 기본 옵션의 전역 config 구성
