[React Query] staleTime? cacheTime? 그게 도대체 뭔데?

이번 포스팅에는 React 혹은 RN에서 API 호출과 효율적인 캐싱을 주로 담당하는 react query 라이브러리.

그 중에서도 주요 기능인 staleTime과 cacheTime에 대해 전반적으로 알아가보는 시간을 가져보자.

 

이 포스팅은 다른 프론트 개발자분께서 알기 쉽게 올려주신 자료를 보고 참고하여 정리한 것으로,

좀 더 자세한 정보를 얻길 원한다면 https://ttaerrim.tistory.com/53

리액트 쿼리의 StaleTime과 CacheTime

위 포스팅을 참고하면 좋을 것 같다.

 

❓staleTime

 

stale은 신선하지 않은 이라는 뜻으로, fresh와 반대되는 개념이라고 생각하면 된다.

react query에서는 API를 통해 데이터를 받아오게 되면, 해당 데이터에 대한 상태를 stale한 데이터, fresh한 데이터로 나뉘어지게 된다.

 

즉, 설정한 staleTime이 지나기 전까지 데이터의 상태는 fresh이며, staleTime이 지난 데이터는 stale한 데이터로 간주하게 된다.

(default는 0이므로 따로 설정하지 않고 useQuery를 통해 API를 호출하게 되면 받아온 데이터는 그 즉시 stale 상태로 간주한다.)

 

예를 들어 컴포넌트가 마운트 됐을 때 API 호출을 한다고 가정해보자.

useQuery를 통해 호출한 API에서 받아온 데이터는 캐싱된다.

이후 같은 컴포넌트를 인입하게 될 경우, react query에서는 데이터의 상태를 파악하여

stale 상태라면 API를 재호출하여 데이터를 새로 할당하고, fresh 상태라면 캐싱된 데이터를 가져오게 된다.

 

❗️주의점

데이터를 효율적으로 관리하는 데 아주 좋은 기능으로 보이지만 이를 남용한다면 큰 낭패를 불러올 수 있다.

만약 요청할 데이터가 자주 바뀌게 되는, 게시판의 피드 데이터를 불러오는데

staleTime : Infinity 로 설정하게 되면 피드 데이터는 강제로 API를 호출하게 하지 않는 이상

처음 랜더링시켰던 데이터 그대로 보여질 것이다.

 

어떤 기능이든 상황에 맞게 사용한다면 아주 효율적으로 데이터 관리를 할 수 있을 것이다.

 

❓cacheTime

 

cacheTime은 메모리에 저장된 캐싱 데이터가 유효한 시간을 말한다.

쿼리를 사용하는 컴포넌트가 언마운트 되게 되면 쿼리는 비활성화 상태가 되게 되는데, 비활성화된 데이터는 캐시에서 삭제된다.

 

앞서 설명한대로 데이터의 상태가 stale이면 쿼리는 fresh한 데이터를 호출하게 되는데, 이 fresh한 데이터를 완전히 가져오기 전까지

쿼리는 캐싱된 데이터를 사용하게 된다.

 

cacheTime은 기본값이 300000으로, 이를 시간으로 환산하면 5분이다.

 

---

staleTime과 cacheTime을 따로 설정하지 않았을 때 API를 호출하게 되면

API 요청 및 응답에 따라 반환된 데이터는 즉시 stale 상태로 변경될 것이다.

 

이후 API를 재호출 하게되면 쿼리는 우선 캐시가 유효한지 확인하게 된다.

처음 호출한 시점에서 5분 동안은 캐시가 유효하므로 캐싱된 데이터를 사용할 수 있지만, stale 상태이기에

다시 쿼리는 API 요청을 수행하게 되고, 새로 받아온 데이터가 이전 데이터와 동일한 지 비교한 후 동일하지 않다면 캐시를 업데이트 하게 된다.

 

즉 staleTime과 cacheTime을 따로 설정하지 않는다면 컴포넌트가 마운트 될 때마다 API 요청은 이루어지게 된다.

---

이번 포스팅에서는 react query의 staleTime과 cacheTime에 대해 간단히 알아보았다.

사용법은 매우 간단하지만, 이를 효율적으로 사용하려면 기능의 사용법을 아는 정도에 국한되어서는 안될 것이다.

보다 더 사용자 입장에서 생각하고, API 기능에 대한 많은 이해가 필요할 것으로 사료된다.

 

허나 이런 리스크 때문에 주어진 기능을 활용하지 않고 있다면 과연 진정 프론트 개발자라고 말할 수 있을까.