톡FE, My구독 서비스 Redux-Saga에서 React Query로 전환기 공유

톡FE 파트가 정기 결제 기반 구독 서비스 'My구독'에서 Redux와 Redux-Saga를 제거하고 React Query(v3.34.0)로 상태 관리를 전환한 경험을 공유했다. 기존 구조는 API 증가에 따라 액션 타입과 Saga 파일이 복잡해지고, 서버 데이터와 클라이언트 데이터의 경계가 모호해지는 문제가 있었다.

전환 배경 및 구조 개선

클라이언트 전역 상태가 적고 서버 데이터 의존도가 높은 특성상 React Query의 캐싱 및 페칭 기능이 더 적합하다고 판단했다. 전환 과정에서 Query Key 네이밍을 '도메인 그룹, query 함수 이름, API 응답에 영향을 주는 값' 순으로 표준화하고, 공통 로직을 담은 '베이스 쿼리'와 페이지별 옵션을 담은 '커스텀 쿼리'로 분리해 컴포넌트 복잡도를 낮췄다.

주요 주의사항 및 활용

React Query 사용 시 useQueries 훅은 자체 옵션 설정이 불가하며, isLoading(캐싱 데이터 없을 때만 true)과 isFetching(캐싱 유무 관계없이 Fetching 시 true)의 동작 차이를 이해해야 한다. 또한 useMutation의 mutate 함수는 Promise를 반환하지 않으므로 비동기 처리에는 mutateAsync를 사용해야 한다. 병렬 쿼리의 로딩 상태 확인이 어려운 경우, queryCache를 참조해 모든 쿼리의 Fetching 완료를 체크하는 커스텀 훅을 구현해 렌더링 조건을 단순화했다.

평가 및 전망

Redux-Saga의 복잡한 사이드 이펙트 관리가 단순화되고 캐싱 처리가 쉬워져 개발 리소스를 절감할 수 있었다. 다만 Mutation 중복 호출 제어 옵션 부재 등 일부 아쉬운 점이 있으며, React Query의 지속적인 업데이트를 통해 기능이 개선되기를 기대한다고 밝혔다.