[ReactQuery] StaleTime과 CacheTime에 대해서 알아보자

❗ StaleTime, CacheTime

React에서 cacheTime과 staleTime은 React Query라는 라이브러리에서 사용되는 옵션이다.

이 옵션들은 데이터의 캐싱 및 유효성 검사에 관련된 기능을 제어하는 데 사용된다.

 

❗ StaleTime ?

• staleTime은 데이터가 "stale" 상태로 간주되는 기간을 지정
• 데이터가 "stale" 상태란, 이전 쿼리 결과가 캐시되어 있지만, 그 결과가 일정 시간 동안 업데이트되지 않은 상태
• staleTime은 밀리초 단위로 설정되며, 기본값은 0
• staleTime이 0보다 큰 값으로 설정되면, staleTime 이후에도 이전 캐시 결과를 사용할 수 있다. 이렇게 하면 네트워크 요청을 최소화하고, 사용자 경험을 개선할 수 있다.
• staleTime이 0으로 설정되면, 데이터가 한 번 "stale" 상태가 되면 즉시 다시 쿼리를 수행하여 업데이트된 데이터를 가져오고 받아오는 즉시 stale하다고 판단해서 캐싱 데이터와는 무관하게 계속 fetching을 수행한다. 그러므로 staleTime을 지정하지 않고 사용한다면 React Query의 캐싱 기능을 활용할 수 없다. 
• fresh 상태일때는 페이지를 이동했다가 돌아왔을 경우에도 fetch가 일어나지 않는다. 즉, 데이터가 한번 fetch 되고 staleTIme이 지나지 않았다면 unmount 후 mount가 발생해도 다시 fetch가 발생하지 않는다.

❗ CacheTime ?

• cacheTime은 쿼리 결과를 캐시로 저장하는 기간을 지정한다.
• 기본적으로, React Query는 이전 쿼리 결과를 자동으로 캐시하고, 이후 같은 쿼리가 호출될 때 이 캐시를 사용한다.
• cacheTime은 밀리초 단위로 설정되며, 기본값은 5분(300000 밀리초)
• cacheTime이 경과하면 React Query는 다시 쿼리를 수행하여 최신 데이터를 가져온다.
• 쿼리 인스턴스가 unmount되면 데이터는 inactive 상태로 변경되며, 캐시는 cacheTime 만큼 유지된다.
  이걸 cacheTime 만큼 유지시키는 이유는 쿼리 인스턴스가 다시 마운트되면 데이터를 fatch하는 동안 cacheTime이 지나지 않은 캐시 데이터를 보여준다.
• cacheTime이 지나면 가비지 콜렉터로 삭제가 된다. 

글로 봐선 명확히 이해가 힘들 수 있으니 바로 예제로 살펴보자 

 

❗ 예제 

import React from 'react';
import { useQuery } from 'react-query';

const fetchUser = async () => {
  // API를 호출하여 사용자 데이터를 가져오는 비동기 함수
  const response = await fetch('https://api.example.com/users/1');
  const data = await response.json();
  return data;
};

const UserProfile = () => {
  const { data } = useQuery('user', fetchUser, {
    cacheTime: 60000, // 1분 동안 캐시로 저장
    staleTime: 10000, // 10초 이내에는 캐시된 결과를 사용
  });

  if (data) {
    return (
      <div>
        <h2>{data.name}</h2>
        <p>{data.email}</p>
      </div>
    );
  }

  return <div>Loading...</div>;
};

export default UserProfile;

위의 예제는 UserProfile 컴포넌트에서 useQuery를 사용하여 사용자 데이터를 가져오는 예제이다.

 

✔ staleTime ( 유통 기한 )

1. staleTime: 10000은 10초 이내에는 캐시된 결과를 사용.
2. cacheTime 이후에 10초 이내에 다시 컴포넌트가 렌더링될 경우, 서버로부터 데이터를 요청하지 않고 캐시된 결과를 사용.
3. 이를 통해 네트워크 요청을 최소화하고 성능을 향상시킴.

✔ cacheTime ( 파기 시간 )

1. cacheTime: 60000은 쿼리 결과를 1분 동안 캐시로 저장.
2. 첫 번째 요청 후 1분 동안은 같은 쿼리를 호출하더라도 서버로부터 데이터를 다시 받지 않고 캐시된 결과를 사용.

따라서, 첫 번째 렌더링에서 fetchUser 함수가 호출되고 데이터를 받아온 후, 

그 이후 1분 동안은 동일한 쿼리가 호출되어도 서버로부터 데이터를 다시 받지 않는다. 

그리고 10초 이내에 다시 UserProfile 컴포넌트가 렌더링되면 캐시된 결과를 사용하여 빠르게 UI를 업데이트한다.

이 예제를 통해 cacheTime과 staleTime을 활용하여 쿼리 결과를 캐시하고, 

적절한 유효성 검사를 통해 데이터를 업데이트하는 방법을 이해할 수 있을 것이다.

 

유의할 점은 staleTime이 cacheTime보다 길더라도 cacheTime이 지나면 데이터가 사라지기 때문에 적용할 때 staleTime보다 cacheTime이 더 길어야 한다. 

---

** 유효성 검사는 캐시된 데이터의 staleTime을 확인하고 서버에서 다시 가져와야 하는지 여부를 결정하는 프로세스이다.

** 쿼리는 특정 데이터 가져오기 작업을 나타낸다. 식별자(쿼리 키), 가져오기 기능 및 동작을 제어하는 ​​다양한 옵션으로 구성되어 있다.