트러블 슈팅: 중복 요청을 계속 하고 있던 현상 해결

요약

• 문제: 동일한 GET API가 반복 호출되어 네트워크 요청이 과다 발생했습니다.
• 원인: TanStack Query(React Query)의 기본 설정으로 인해 즉시 stale 상태로 처리되어 재요청이 발생했습니다.
• 조치: QueryClient의 defaultOptions와 개별 쿼리 옵션(staleTime, gcTime, retry, refetchOn…)을 적절히 설정하여 중복 재요청을 방지했습니다.
• 효과: 불필요한 중복 요청이 감소하고, 포커스/재마운트/네트워크 재연결 시의 불필요한 재요청을 방지하였습니다.

문제

네트워크 로그를 확인한 결과 getActListApi.ts에서 동일한 GET 요청이 반복적으로 호출되고 있음을 확인했습니다. 이로 인해 API 요청 빈도가 높아져 성능 저하가 발생했습니다.

원인 분석

• 프로젝트에서 QueryClientProvider를 기본 설정으로 생성하여 사용하고 있었으며, 별도의 캐싱/재요청 최적화 설정이 적용되어 있지 않았습니다.
• 기본 동작(예: refetchOnWindowFocus, refetchOnMount, 즉시 stale 처리 등)으로 인해 컴포넌트 마운트/포커스 등 여러 상황에서 불필요한 재요청이 발생하였습니다.

해결 과정