1. 개요

react-query는 전역 상태관리, 코드 간소화 등 많은 장점이 있지만 가장 매력적인 기능은 캐싱 기능이다. react-query 없이 서버의 데이터를 받아 클라이언트쪽에서 캐싱하는 기능을 어떻게 구현해야할지는 고민이 필요하다. 그러나 react-query에서는 쉽게 캐싱기능을 구현할 수 있다. 이 캐싱기능을 제대로 사용하기 위해 react-query의 stale, cachetime, refetch 등에 대해 알아보자.

2. stale 상태

2-1) stale

사전적 정의는 '탁한', '신선하지 않은'이라는 뜻이다. 가져온 데이터가 stale하다면, 이 데이터는 더 이상 신선하지 않는 것이기 때문에 업데이트가 필요하다.

2-2) refetch

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

각각의 refetch 되는 상황은 제공되는 옵션을 통해 사용여부를 수정할 수 있다.

1. 새로운 인스턴스가 마운트 될때 ⇒ refetchOnMount

refetchOnMount 옵션은 컴포넌트가 마운트될 때(그리고 unmount 후 다시 mount될 때) 해당 쿼리가 다시 요청(refetch) 될지 여부를 제어한다.

• 기본값(true):
  • “stale” 상태인 쿼리만 다시 불러온다.
  • 즉, staleTime이 지나 데이터가 만료(stale) 되었을 때에만 마운트 시 재요청이 발생하고, 아직 신선한(fresh) 데이터라면 네트워크 요청을 하지 않는다.
• false:
  • 마운트 시 절대 다시 불러오지 않는다. (데이터가 stale이어도 무시)
• "always":
  • 데이터가 fresh/stale 구분 없이 항상 마운트 시 재요청을 보낸다.

2. 브라우저 화면이 다시 focus 됐을 때 ⇒ refetchOnWindowFocus

3. 네트워크가 재연결됐을 때 ⇒ refetchOnReconnect

4. 특별히 설정한 refetch interval이 있을 때 ⇒ refetchInterval