React Query(Tanstack Query) 의 staleTime 사용 방법

☘️ 시작하기 앞서

현재 진행하고 있는 프로젝트를 구현하면서 사용한 React Query(Tanstack Query) 의 staleTime 에 대해 알아 볼 것이다.

 

이를 사용하면서 불필요한 API 요청을 줄일 수 있으며 매우 유용하다 생각이 들어 글로 작성하게 되었다.

그 밖에도 React Query 를 사용하여 단순하게 데이터를 요청하는 게 아니라 유용한 기능들이 있다는 것을 직접 사용하면서 알게 되었다.

 

특히 프로젝트를 진행하기 전에 공식문서를 한국어로 번역한 깃허브 글을 본 것이 매우 도움이 되었다!

혹시 React Query 를 사용한다면 이 글을 정독하는 것을 추천한다

GitHub - ssi02014/react-query-tutorial: 😃 TanStack Query(aka. react query) 에서 자주 사용되는 개념 정리

 

☘️ staleTime

staleTime 란?

staleTime 이란 무엇일까? 

 

staleTime
데이터가 fresh에서 stale 상태로 변경되는 데 걸리는 시간

 

여기서 stale 과 fresh 의 뜻은

stale, fresh 뜻

 

즉, stale 은 데이터가 신선하지 않은 오래된 데이터이며 fresh 는 데이터가 신선한 최신 데이터라는 의미이다.

신선하지 않은 데이터라면 데이터를 새로 가져오고, 신선한 데이터라면 데이터를 새로 가져올 필요가 없다.

 

그래서 staleTime 이 5000 이라면 5초 뒤에 fresh 에서 stale 로 변하게 된다.

 

staleTime 특징

React Query 에서 staleTime 은

• fresh 상태에서 네트워크 요청 fetch 를 하지 않는다.
• staleTime 은 기본적으로 0 이다. (바로 stale 상태가 됨)

=> 그렇다면, staleTime 를 설정해서 불필요한 네트워크 요청을 줄일 수 있다!

 

(물론 상황마다 다르지만, 데이터가 잘 변하지 않은 데이터일 때 사용하면 유용하다.)

 

staleTime 사용법

사용 방법은 useQuery 안에 staleTime 을 원하는 시간만큼 적어주면 된다.

  const { data, isLoading, isError } = useQuery({
    queryKey: ['test'],
    queryFn: getTestData,
    staleTime: 1 * 60 * 1000, // 1분
  });

 

staleTime 적용

staleTime 적용 전

일단 내 프로젝트는 컴포넌트에서 letterId 를 props 로 보내주고 각 컴포넌트에서 letterId 를 사용해서 같은 데이터를 패칭한다.

(데이터 fetch 전에 로딩 처리를 하기 위해 useSuspenseQuery 사용함)

내 코드

 

이 상태에서 버튼을 눌러 화면을 전환하면 동일한 데이터라 새로 요청할 필요가 없는데 계속 요청하는 것을 볼 수 있다.

(참고로 mocking 서버 사용 중)

 

staleTime 적용 전

 

staleTime 적용 후

하지만 staleTime 을 1분으로 변경하고 

staleTime 설정

화면 전환을 계속하면 아까와 다르게 데이터가 다시 요청되지 않은 것을 확인하였다.

(1분이 지나면 다시 데이터 요청 됨, 그리고 실제 프로젝트에서는 전역적으로 staleTime 을 설정함)

 

staleTime 적용 후

즉 이렇게 데이터의 요청을 최소화 할 수 있게 된다!

 

☘️ 마무리 하며...

이렇게 staleTime 을 사용하게 되면 성능을 향상 시키고, 네트워크 사용량, 서버 부하를 감소시킬 수 있게 된다.

그래서 성능적으로 유용하기 때문에 리얼타임을 요구하는 서비스가 아니라면 staleTime 을 적용하는 것이 더 좋을 것 같다.

 

그리고!

mutation 요청(POST, PATCH, DELETE 등) 을 하면 다시 데이터를 패칭해줘야 되는데, 이는 query 초기화 를 하면 된다. 이것도 추후에 글을 작성할 생각이다.