🔥 TanStack Query의 중요한 기본 설정

TanStack Query는 처음부터 적극적이면서도 합리적인 기본 설정을 갖추고 있습니다. 이러한 기본 설정은 때로 새로운 사용자들을 당황하게 하거나, 사용자가 모르는 경우 학습과 디버깅을 어렵게 만들 수 있습니다. TanStack Query를 계속 배우고 사용하면서 다음 사항들을 염두에 두세요:

1. useQuery나 useInfiniteQuery를 통한 쿼리 인스턴스는 기본적으로 캐시된 데이터를 오래된 것으로 간주합니다. 이 동작을 변경하려면 staleTime 옵션을 사용해 전역 또는 개별 쿼리 수준에서 설정할 수 있습니다. staleTime을 길게 설정하면 쿼리가 데이터를 자주 다시 가져오지 않습니다.

2. 오래된 쿼리는 다음 상황에서 자동으로 백그라운드에서 다시 가져옵니다:

   • 새로운 쿼리 인스턴스가 마운트될 때
   • 창이 다시 포커스될 때
   • 네트워크 연결이 복구될 때
   • 선택적으로 설정된 새로 고침 간격에 따라

   이 기능을 변경하려면 refetchOnMount, refetchOnWindowFocus, refetchOnReconnect, refetchInterval 등의 옵션을 사용할 수 있습니다.

3. useQuery, useInfiniteQuery 또는 쿼리 관찰자의 활성 인스턴스가 더 이상 없는 쿼리 결과는 "비활성" 상태로 표시되며, 나중에 다시 사용될 경우를 대비해 캐시에 남아 있습니다.

4. 기본적으로 "비활성" 쿼리는 5분 후에 가비지 컬렉션됩니다. 이를 변경하려면 쿼리의 기본 gcTime을 1000 * 60 * 5 밀리초가 아닌 다른 값으로 조정할 수 있습니다.

5. 실패한 쿼리는 UI에 오류를 표시하기 전에 지수 백오프 지연으로 3번 조용히 재시도합니다. 이를 변경하려면 쿼리의 기본 retry와 retryDelay 옵션을 3과 기본 지수 백오프 함수가 아닌 다른 값으로 조정할 수 있습니다.

6. 쿼리 결과는 기본적으로 구조적으로 공유되어 데이터가 실제로 변경되었는지 감지하고, 변경되지 않았다면 데이터 참조가 그대로 유지됩니다. 이는 useMemo와 useCallback과 관련하여 값 안정화에 도움을 줍니다. 이 개념이 생소하다면 걱정하지 마세요! 99.9%의 경우 이 기능을 비활성화할 필요가 없으며, 추가 비용 없이 앱의 성능을 향상시킵니다.

   구조적 공유는 JSON 호환 값에만 작동하며, 다른 값 유형은 항상 변경된 것으로 간주합니다. 예를 들어 큰 응답으로 인한 성능 문제가 발생한다면 config.structuralSharing 플래그로 이 기능을 비활성화할 수 있습니다. JSON 호환이 아닌 값을 쿼리 응답에서 다루면서도 데이터 변경 여부를 감지하고 싶다면, config.structuralSharing에 사용자 정의 함수를 제공하여 이전 응답과 새 응답에서 값을 계산하고 필요에 따라 참조를 유지할 수 있습니다.

추가 읽을거리

TanStack Query의 기본 설정에 대해 더 자세한 설명을 원한다면 커뮤니티 리소스의 다음 글을 참고해 보세요:

• 실용적인 React Query
• 상태 관리자로서의 React Query