[리액트쿼리] Important Defaults (공홈 번역)

st_hwang·2022년 12월 5일
0
post-thumbnail

공식 홈페이지 문서를 번역한 내용입니다.

출처
https://tanstack.com/query/v4/docs/guides/important-defaults

Important Defaults

리액트 쿼리는 공격적이면서도 온전한 기본값으로 구성되어 있습니다. 때때로 이런 기본값이 새로운 유저를 당황하게 만들고, 새롭게 배우고 / 디버깅하는 것을 어렵게 만들 수 있습니다. 리액트 쿼리를 배우고 사용할 때에는 다음을 염두하는 것이 좋습니다.

  • useQueryuseInfiniteQuery로 생성된 Query 인스턴스는 기본적으로 캐시된 데이터를 stale (오래된) 상태로 간주합니다.

이 동작을 변경하려면, staleTime 옵션을 통해 쿼리를 전역적으로 쿼리별로 당신의 쿼리를 구성하면 됩니다. staleTime 옵션을 길게 설정하는 것은 쿼리들이 데이터를 자주 리페칭하지 않는 것을 의미합니다.

  • stale 쿼리들은 다음과 같은 경우 자동적으로 리페치합니다.

    	* 쿼리 마운트의 새로운 인스턴스
    	* 윈도우 창이 다시 포커싱될 때
    	* 네트워크가 재연결될 때
    	* (설정해놓은 ) refetch 주기마다 자동적으로

예상치 못한 리페칭이 일어난다는 것은 아마도 윈도우 창을 다시 포커싱하고, 리액트 쿼리가 refetchOnWindowFocus 를 수행한 것입니다. 개발 도중에 특히 브라우저와 DevTools와 앱 사이에서 다시 포커싱을 하면 리페칭이 발생하므로 유의하세요.

리페칭이 일어나는 동작을 변경하고 싶다면, refetchOnMount, refetchOnWindowFocus, refetchOnReconnet, refetchInterval 과 같은 옵션을 사용하면 됩니다.

  • useQuery, useInfiniteQuery 의 활성화된 인스턴스가 없는 쿼리 결과나 쿼리 옵저버는 'inactive' 라는 라벨값이 붙고 나중에 다시 쓸 때를 대비해서 캐시에 남아 있습니다.
  • 기본적으로 'inactive' 쿼리들은 5분 후에 가비지 컬렉터 대상이 됩니다.

이 동작을 변경하려면 cacheTime 기본값을 1000*60*5 말고 다른 시간으로 변경하세요.

  • 지수 백오프 지연으로 실패한 쿼리는 캡쳐링되고 UI에 에러가 표시되기 전에 3번 연결을 재시도합니다.

이 동작을 변경하려면 지수 백오프 함수에 대한 retry, retryDelay 의 기본값을 3이 아닌 것으로 설정하세요.

  • 기본적으로 쿼리 결과는 구조적으로 공유되어 데이터가 실제로 변경되었는지 감지하고, 변경되지 않은 경우 useMemo나 useCallback와 관련된 value의 안정화를 위해서 데이터 레퍼런스가 변경되지 않은 채로 유지됩니다. 이 개념이 이상하게 느껴져도 걱정하지 않아도 됩니다. 99.9% 의 시간동안 이 기능을 꺼놓을 필요가 없고, 당신의 앱은 비용없이 성능이 더 좋아질겁니다.

구조적 공유는 JSON 호화값에서만 작동하며 다른 value 타입은 변경된 것으로 간주됩니다. 예를 들어, 거대한 응답값으로 인해 퍼포먼스 이슈가 보고싶다면 config.structuralSharing 플래그를 사용해서 이 옵션을 꺼놓을 수 있습니다. 쿼리 응답값에서 JSON에 호환되지 않는 값을 처리하고 데이터가 변경되었는지 여부를 감지하고자 한다면 config.isDataEqual 에서 데이터 비교 함수를 정의내리거나, config.structuralSharing 에 예전 응답값과 새로운 응답값을 비교하고, 필요에 따라 레퍼런스를 유지하는 커스텀 함수를 제공하면 됩니다.

profile
frontend developer

0개의 댓글