프론트엔드
카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유
두줄요약
Redux 기반 서버 상태 관리의 보일러플레이트와 직접 구현 부담을 분석했습니다.\nReact Query의 Query·Mutation·캐싱 기능으로 비동기 처리와 사용자 경험을 개선했습니다.
문제 상황
- Redux와 redux-saga 기반 API 통신에서 Action·Reducer·Saga 중심의 장황한 보일러플레이트
- 비동기 서버 상태의 구조·로딩 상태·미들웨어를 프로젝트별로 직접 설계해야 하는 협업 비용
- 웹뷰의 포그라운드 전환, 캐싱, 재시도, 낙관적 업데이트를 위한 직접 구현 부담
구조와 흐름
useQuery의 Query Key 기반 서버 상태 조회·캐싱·동기화useMutation과invalidateQueries기반 서버 상태 변경 후 캐시 무효화 및 재조회- Custom Hook으로 조회와 변경 로직을 컴포넌트에서 분리하는 Todo 예시
선택 이유
- Redux 대비 API 상태 관리 코드와 비동기 처리 복잡도 감소
- 로딩·오류·갱신 여부 등 규격화된 API 상태 데이터 제공
refetchOnWindowFocus, 캐싱, 재시도, Persist Caching, Optimistic Update 등 내장 기능
적용해볼 점
- 전역 UI 상태와 서버 상태를 구분한 도구 선택
- Query Key 상수화와 Custom Hook 기반 API 접근 규칙
- 웹뷰 환경의 포커스 재조회 시나리오에
refetchOnWindowFocus활용
