React Query의 캐시

최종 수정일 : 2024-07-22

React Query의 캐시

유저가 자주 보는 데이터를 어딘가에 저장해 두었다가 백엔드에 요청할 필요 없이 바로 보여주기 위해 캐시(cache)라는 것을 사용한다.

 

캐시(Cache)

데이터를 미리 복사해 놓는 임시 장소를 말한다. 보통 저장 공간의 크기는 작지만, 데이터를 가져오는 속도는 아주 빠르다는 특징이 있다. 따라서 자주 사용하는 데이터를 캐시에 저장해 두면, 해당 데이터를 훨씬 빠르게 가져와 사용할 수 있다.

 

웹 브라우저는 기본적으로 캐시를 사용해 속도를 높이고 네트워크 비용을 아낀다. 이처럼 캐시를 사용하는 것을 '캐싱'이라고 한다.

---

React Query의 캐시

리액트 쿼리 역시 이러한 캐싱을 지원한다. 그렇다면, 언제 데이터를 백엔드에서 다시 받아오는 refetch를 하고, 언제 캐시에 저장되어 있는 데이터를 보여줄까? 이를 이해하기 위해서는, 우선 리액트 쿼리의 데이터 라이프 사이클을 알아야 한다.

useQuery는 먼저 전달받은 쿼리 키로 캐시에 저장된 데이터가 있는지를 확인한다.

1) 만약 저장된 데이터가 없다면, 쿼리 함수를 실행해 데이터를 백엔드로부터 받아온다. 그런 다음에 '쿼리 키'로 데이터를 캐시에 저장한다.

 

2) 그렇다면 쿼리 키로 저장된 데이터가 캐시에 있으면 어떻게 될까? 이때는 백엔드에서 방금 데이터를 받아와 캐시에 저장된 데이터는 fresh, 즉 신선한 상태로 판단한다. 그러다가 stale time이라고 불리는 특정 시간이 지나면 데이터는 stale, 즉 신선하지 않은 상태가 된다. 마지막으로 컴포넌트가 언마운트되면 해당 데이터가 쓰이지 않는 상태가 되어 inactive 상태가 된다.

 

3) 쿼리 키로 저장된 데이터가 있는 경우, useQuery는 캐시에 저장되어 있는 데이터를 리턴한다. 만약 데이터가 fresh 상태라면 리턴, stale 상태라면 백그라운드에서 refetch를 진행한다. 그리고 백엔드에서 새로 받아 온 데이터로 기존의 데이터를 갱신한다.

 

데이터가 stale 상태라면 리액트 쿼리는 기본적으로 다음 네 가지 상황에서 refetch를 진행한다.

1. 새로운 쿼리 인스턴스가 마운트 됨
2. 브라우저 창에 다시 포커스가 이동
3. 네트워크가 다시 연결됨
4. 미리 설정해 둔 refetch interval 시간이 지났을 때

이를 변경하고 싶다면 각각 refetchOnMount, refetchOnWindowFocus, refetchOnReconnect, refetchInterval 옵션을 변경하면 된다.

 

Stale Time

리액트 쿼리에서의 디폴트 값은 0이므로, 방금 받아온 데이터도 stale 상태가 되고 매번 데이터가 필요할 때마다 refetch를 한다. 구현하려는 사이트의 특성에 따라 매번 refetch를 할 필요가 없는 상황에서는 stale time 값을 적절히 변경해 주면 된다.

 

Garbage Collection Time

리액트 쿼리는 필요 없는 데이털르 삭제하는 것도 알아서 해준다. 데이터가 inactive 상태가 되면 가비지 컬렉션 타임이 지나면 캐시에서 삭제가 된다. 디폴트 값으로 5분이 설정되어 있는데, 이 역시 값을 변경할 수 있다.

function HomePage() {
  const result = useQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
    staleTime: 60 * 1000,
        gcTime: 60 * 1000 * 10,
  });
  console.log(result);

  return <div>홈페이지</div>;
}