리액트 쿼리 Important Defaults

시바코코개발자·2023년 5월 9일
0

react

목록 보기
5/7

기본적으로 React Query는 "공격적이지만 정상적인 기본값"으로 구성됩니다. 때로는 이러한 기본값이 새로운 사용자를 당황하게 하거나 사용자가 알지 못하는 경우 학습/디버깅을 어렵게 만들 수 있습니다. React Query를 계속 배우고 사용할 때 이 기본값을 염두에 두세요:

  • useQuery 또는 useInfiniteQuery를 통한 쿼리 인스턴스는 기본적으로 캐시된 데이터를 오래된 것으로 간주합니다.

    이 동작을 변경하려면 staleTime 옵션을 사용하여 전역 및 쿼리별로 쿼리를 구성할 수 있습니다. staleTime을 길게 지정하면 쿼리가 데이터를 자주 다시 가져오지 않습니다.

  • 오래된 쿼리는 다음과 같은 경우에 백그라운드에서 자동으로 다시 가져옵니다:
    • 쿼리의 새 인스턴스가 마운트되는 경우
    • 창이 다시 초점을 맞춘 경우
    • 네트워크가 다시 연결된 경우.
    • 쿼리는 선택적으로 새로 고침 간격으로 구성됩니다.

예상치 못한 refetch가 나타날경우, 방금 창에 포커스를 맞췄고 React Query가 refetchOnWindowFocus를 수행 중이기 때문일 수 있습니다. 개발 중에는 특히 브라우저 개발자 도구와 앱 사이에 포커스를 맞추는 것도 불러오기를 유발하기 때문에 이 기능이 더 자주 트리거될 수 있으므로 주의하세요.

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

사용 쿼리, 사용 무한 쿼리 또는 쿼리 관찰자의 활성 인스턴스가 더 이상 없는 쿼리 결과는 "비활성"으로 레이블이 지정되며 나중에 다시 사용될 경우를 대비하여 캐시에 남아 있습니다.
기본적으로 "비활성" 쿼리는 5분 후에 가비지 수집됩니다.
이를 변경하려면 쿼리에 대한 기본 cacheTime을 1000 60 5밀리초가 아닌 다른 값으로 변경하면 됩니다.

실패한 쿼리는 기하급수적인 백오프 지연을 거쳐 자동으로 3번 재시도되며, 오류를 캡처하여 UI에 표시하기 전에 기하급수적인 지연이 발생합니다.
이를 변경하려면 쿼리에 대한 기본 재시도 및 재시도 지연 옵션을 3이 아닌 다른 값으로 변경하고 기본 지수 백오프 함수를 변경하면 됩니다.

기본적으로 쿼리 결과는 구조적으로 공유되어 데이터가 실제로 변경되었는지 감지하고, 변경되지 않은 경우 데이터 참조는 변경되지 않은 채로 유지되어 사용 메모 및 사용 콜백에 대한 값 안정화에 더 도움이 됩니다. 이 개념이 낯설게 들리더라도 걱정하지 마세요! 99.9%의 경우 이 기능을 비활성화할 필요가 없으며, 비용 부담 없이 앱의 성능을 향상시킬 수 있습니다.
구조적 공유는 JSON 호환 값에서만 작동하며, 다른 값 유형은 항상 변경된 것으로 간주됩니다. 예를 들어 대규모 응답으로 인해 성능 문제가 발생하는 경우 config.structuralSharing 플래그를 사용하여 이 기능을 비활성화할 수 있습니다. 쿼리 응답에서 JSON과 호환되지 않는 값을 처리하면서도 데이터가 변경되었는지 여부를 감지하려는 경우 config.isDataEqual을 사용하여 데이터 비교 함수를 정의할 수 있습니다.

0개의 댓글