[react-query] 3. react-query의 캐싱

컴퓨터에 있는 데이터를 가져오는 것에 비해서 서버에서 데이터를 가져오는 일은 시간이 많이 걸릴 수 있다. 그런데 유저가 방금 확인한 데이터를 자주 보는 경우에 서버에서 계속 받아오기 보다는 컴퓨터 어딘가에 저장했다가 백엔드에 요청 할 필요 없이 바로 보여주는게 효과적이다. 이럴 때 캐시라는 걸 사용한다.

 

1.cache

 

캐시란 데이터를 미리 복사해놓는 임시 장소, 저장공간의 크기는 작지만 데이터를 가져오는 속도는 빠르다는 장점이 있다. 

자주 사용하는 데이터를 캐시에 저장해두면 해당 데이터를 빠르게 가져와서 사용할 수 있다. 

 

브라우저는 기본적으로 캐시를 사용해서 속도를 높이는데, 사이트에 접속해서 받은 데이터를 캐시 형태로 저장해놓고 사용자가 같은 사이트에 접속하면 저장해놓은 데이터를 유저에게 보여준다. 

이렇게 캐시를 사용하는 것을 캐싱이라고 한다. 

2. React-query의 Cache

 

리액트 쿼리도 캐싱을 지원한다. 매번 데이터를 요청할 때마다 서버에서 받아오는 게 아니라 캐시에 저장되어 있는 데이터를 유저에게 보여준다. 

 

const Home = () => {
  const result = useQuery({
    queryKey: ["getposts"],
    queryFn: getPosts,
  });
  console.log(result)
  return <div>Home</div>;
};

export default Home;

 

Home 컴포넌트가 렌더링이 되면 useQuery가 실행되고 여기서 쿼리로 설정한 getPosts 함수를 통해 데이터를 받아온다. 

하지만 useQuery를 사용한다고 해서 무작정 서버에서 데이터를 받아오는 게 아니라 전달받은 queryKey로 캐시에 저장된 데이터를 불러온다. 

 

리액트 쿼리 개발자 도구를 열어보면 "getposts"라는 queryKey로 받아온 데이터가 캐시에 저장된 것을 확인 할 수 있다.

만약 데이터가 없으면 queryFn을 실행해 데이터를 서버에서 받아오고 "getPosts"라는 queryKey로 데이터를 캐시에 저장한다.

 

useQuery가 실행이 되었는데 쿼리 키로 저장된 데이터가 있을 경우 3가지 상태가 있다. 

1. fresh
   1. 이제 막 데이터를 받아와 캐시에 저장된 신선한 데이터 상태
2. stale
   1. staleTime라는 특정 시간이 지나면 바뀌는 신선하지 않은 데이터 상태
3. inactive
   1. 컴포넌트가 언마운트 되면 해당 데이터가 쓰이지 않는 데이터 상태 

특정 쿼리키로 저장된 데이터가 있는 경우 useQuery는 캐시에 저장된 데이터를 리턴한다.

fresh상태라면 캐시에 저장된 데이터를 바로 리턴,

stale상태라면 백그라운드에서 refetch를 진행 후 새로 받아온 데이터로 특정 쿼리키에 저장된 데이터를 갱신한다.

 

데이터가 stale상태라면 react-query는 4가지의 상황에서 refetch를 진행한다.

1. 새로운 쿼리 인스턴사가 마운트 될 경우 (refetchOnMount)
2. 브라우저 창에 다시 포커스가 갈 경우 (refetchOnWindowFocus)
3. 네트워크가 다시 연결될 경우 (refetchOnReconnect)
4. 미리 설정해둔 refetch interval시간이 지났을 경우  (refetchInterval)

3. stale Time

 

react-query에서는 stale Time이 디폴트 값으로 0으로 설정되어 있다. 따라서 막 받아온 데이터도 stale상태이며 매번 데이터가 필요할 때마다 refetch를 진행한다.

필요한 상황에 다라 staleTime를 적절히 변경해줄 수 있다. 

 

4. Garbage Collection Time

 

캐시는 한정된 공간이기 때문에 필요 없는 데이터는 삭제해서 다른 데이터가 사용할 공간을 마련해줘야한다.

react-query는 필요 없는 데이터를 삭제하는 것도 알아서 해준다.

 inactive 상태의 데이터는 garbageCollectionTime이 지나면 캐시에서 삭제되고 기본 5분으로 설정되어 있으며 변경 가능

 

const Home = () => {
  const result = useQuery({
    queryKey: ["getposts"],
    queryFn: getPosts,
    staleTime:60*1000, //(1분), staleTime 시간 설정 변경
    gcTime:60*1000*10 //(10분), gcTime 시간 설정 변경
  });
  return <div>Home</div>;
};

export default Home;

 

 

react-query의 라이프 사이클 도식화