프론트엔드
찜으로 찜해보는 react-query
두줄요약
Redux 기반 서버 상태 처리의 반복 작업과 컨테이너 간 종속성을 React Query로 개선했습니다. 찜 페이지 사례로 useQuery 캐싱과 useMutation 기반 CRUD 흐름을 설명합니다.
문제 상황
- Redux 기반 API 연동에서 액션·사가·리듀서·셀렉터 작성과 캐시 구현에 따른 높은 작업량
- 컨테이너별 saga·store 구성으로 공통 API 호출 시 컨테이너 간 종속성 발생
선택 이유
- 기존 Redux를 수정하지 않고 점진적 도입 가능한 React Query와 SWR 검토
- mutation 함수, 디버깅 도구, 캐시 시간 설정, 풍부한 레퍼런스를 고려한 React Query 선택
- 라이브러리 크기보다 필요한 기능 제공 여부를 우선한 판단
구조와 흐름
- 서버 상태를 CRUD 기반 서버 데이터 동기화로, 클라이언트 상태를 UI 상태로 구분
useQuery래퍼 훅과 query key를 통해 컴포넌트와 API를 분리하고 캐시 단위 구성useMutation으로 읽기 외 생성·수정·삭제 서버 상태 변경 처리
주의할 점
- query key 중복 방지와 타입별 배열 키 구성 필요
initialData로 초기undefined처리 보완staleTime의 데이터 유효 기간과cacheTime의 캐시 보관 기간 구분
