[Tanstack Query] 리액트 쿼리의 캐싱

우리는 데이터를 유저에게 보여줄 때 매번 백엔드에서 받아오는 대신, 캐시를 사용해 더 빠르고 효율적으로 데이터를 보여준다. 이 글에서는 리액트 쿼리에서 캐싱 과정에 대해 알아본다.

캐시(Cache)란?

캐시는 자주 사용하는 데이터를 임시로 저장해 두는 장소다. 저장 공간은 작지만, 데이터를 빠르게 가져올 수 있다. 웹 브라우저는 사이트 데이터를 캐시에 저장해, 동일한 사이트에 다시 접속할 때 서버에 요청하지 않고 데이터를 보여준다. 이를 캐싱(Caching)이라고 한다.

리액트 쿼리의 데이터 상태

리액트 쿼리의 데이터는 세 가지 상태를 가진다:

1. fresh: 막 받아온 데이터로, 신선한 상태.
2. stale: 일정 시간이 지나 신선하지 않은 상태.
   staleTime 이 지나면 fresh 한 데이터에서 stale 데이터로 변한다.
3. inactive: 컴포넌트가 언마운트되어 사용되지 않는 상태.
   inactive 상태에서 gcTime 이 지나면 캐시에서 삭제된다.

리액트 쿼리의 캐시

리액트 쿼리도 캐싱을 활용해 매번 데이터를 백엔드에서 받아오지 않고, 캐시에 저장된 데이터를 사용한다.

리액트 쿼리의 데이터 흐름

1. 데이터 요청: useQuery 훅을 사용해 데이터를 요청한다.
2. 캐시 확인: 먼저 queryKey를 통해 캐시에 데이터가 있는지 확인한다.
3. 데이터가 없으면: 쿼리 함수를 실행해 백엔드에서 데이터를 받아온다.
4. 데이터 저장: 받아온 데이터를 캐시에 저장한다.
5. 데이터가 있으면: 캐시된 데이터를 반환한다. 데이터가 stale 상태이면 백엔드에서 다시 받아온다.

데이터가 stale 상태라면 서버에서 fresh 한 데이터를 받아오기 전까지는 기존의 stale 한 데이터를 보여줌으로써 유저 경험을 향상 시킨다.

데이터가 없는 것보단 오래된 데이터를 보여주는 게 더 낫다는 것!!!

function HomePage() {
  const result = useQuery({ queryKey: ['posts'], queryFn: getPosts });
  console.log(result);
  return <div>홈페이지</div>;
}

데이터 갱신 (Refetch)

데이터가 stale 상태일 때, 다음 상황에서 데이터 갱신(refetch)이 일어난다:
1. 컴포넌트가 다시 마운트될 때.
2. 브라우저 창이 다시 포커스를 받을 때.
3. 네트워크가 다시 연결될 때.
4. 설정된 간격으로 자동 갱신될 때.

이 동작은 refetchOnMount, refetchOnWindowFocus, refetchOnReconnect, refetchInterval 옵션으로 변경할 수 있다.

Stale Time과 Garbage Collection Time

• staleTime: 데이터가 신선한 상태로 유지되는 시간 (기본값: 0초).
• gcTime: 데이터가 캐시에 유지되는 시간 (기본값: 5분).

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

  console.log(result);
  return <div>홈페이지</div>;
}

위와 같이 쿼리별로 staleTime과 gcTime을 직접 설정하여 디테일하게 최적화를 할 수 있다.