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

자바스크립트 - React.js

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

Lv1_junior_dev 2023. 6. 8. 20:27

❗ 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 ( 유통 기한 )

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

✔ cacheTime ( 파기 시간 )

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

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

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

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

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

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

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

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

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