[React-Query] 캐시 기능 이해하고 활용하기

 

React Query가 좋은 이유 중 하나가 cache 기능일 것이다 ㅎㅎ .

이걸 이용해서 redux 같은 전역 상태 관리 라이브러리를 쓰지 않고 React-Query 만으로도 관리할 수 있기도 한 것이다!! 

 

React-Qury는 이 캐싱 기능을 다루기 위해 stale, cahcetime, refresh 등의 option을 제공한다.

 

stale 상태

 

"탁한", "신선하지 않은" 이란 뜻으로, 업데이트가 필요한 상태이다. 

react-query는 쿼리가 stale 할 때, 다음과 같은 상황에서 해당 쿼리를 fetch한다.

 

• 새로운 인스턴스가 마운트 될 때
• 브라우저 화면이 다시 focus 될 때
• 네트워크가 재연결됐을 때
• 트결히 설정한 refeetch interval이 있을 때

 

staleTime

 

쿼리를 fetch한 이후에 데이터가 stale 상태가 되는데까지 소요되는 시간. react-query는 staleTime을 디폴트로 0으로 설정한다.

쿼리를 fetch하자마자 해당 쿼리는 stale 상태가 되는 것.

 

cacheTime

 

쿼리가 캐시되어 있는 시간을 의미한다. react-query에서 설정한 default 값은 300000(5분) 5분 동안 사용되지 않으면, 저장되는 게 불필요하다고 판단되어 가비지 컬렉터가 수거해 가 캐시에서 사라진다.

 

 

 

 

react-query 캐싱 기능 제대로 이해하기

https://tanstack.com/query/latest/docs/framework/react/guides/important-defaults?from=reactQueryV3

Important Defaults | TanStack Query React Docs

[강추]

[React Query] useQuery 동작원리(1)