핵심 요약
트렌비가 redux 기반의 서버 상태 관리 문제를 해결하기 위해 react-query를 도입하고, 찜 페이지를 예로 useQuery와 useMutation를 활용해 API 연동과 캐시 동기화를 개선했습니다.
구현 방법
- useWishGetCount: useQuery([WISH_GET_COUNT], 비동기 fetch, 초기데이터 설정, 5분 staleTime 포함)
- useWishAddProduct: useMutation으로 상품 찜하기 API 호출, 성공 시 queryClient의 WISH_GET_COUNT를 업데이트하고 WISH_GET_PRODUCT_LIST를 무효화해 목록 갱신
- 데이터 사용 예: 헤더에서 data를 받아 찜 수를 표시
주요 결과
- 보일러플레이트 대폭 감소(Redux에서 5개 파일 → React Query 기반 2개 파일)
- 서버 상태 관리의 확장성과 디버깅 편의성 개선
- 캐시 기반 동기화로 화면 일관성 향상
