[React] React Query는 어떻게 캐싱을 지원할까??

[React] React Query는 어떻게 캐싱을 지원할까??

 

먼저 react query에 대해 잘 모른다면 아래 게시물을 확인하자.

[React] 획기적인 상태관리 라이브러리 React Query???!!

 

캐싱이라는 개념을 아는가? 먼저 cpu에서의 캐싱에 대해 간략하게 설명하고 넘어가겠다. 마을과 호수에 비유해서 이를 알아보자.

 

아프리카 피유 부족이 사는 마을은 호수와 멀리 떨어져 있다. 아이들은 신선한 물을 마실 수 없었고, 물을 먹기 위해선 멀리 있는 호수에 고난과 역경을 겪으며 다녀와야 했다. 또한 이 호수는 신선한 물과 더러운 물이 층을 이루며 있었다.

마을 주민들은 이 호수에서 물을 가져오는 것이 너무 어려워 마을과 가까운 곳에 웅덩이를 만들었다. 호수에서 물을 길어와 웅덩이에 보관한 것이다.

이전보다 훨씬 빠르게 물을 길어올 수 있었지만, 사람들은 신선한 물을 원했다. 따라서 웅덩이에서 사람들이 자주 찾는 신선한 물만 모아 마을 내부에 우물을 만들었다.

이렇게 사람들은 자주 찾는 신선한 물을 빠르게 마실 수 있었다.

 

위 이야기에서 호수는 하드디스크, 웅덩이는 램, 우물은 캐시메모리를 나타낸다.

하드디스크는 공간이 굉장히 여유롭지만 속도가 느리다. 때문에 하드디스크보다 빠르지만 더 용량이 작은 램을 만들어 자주 사용하는 데이터를 저장한다. 그렇지만 램도 아주 자주 사용하는 데이터를 담기엔 느려서 cpu 내에 캐시메모리를 만들어 아주 자주 사용하는 데이터들을 보관한다.

 

마을 내부에는 집세가 비싸서 큰 공간을 차지할 수 없듯이 cpu 내에도 큰 공간을 차지할 수 없어 캐시메모리에는 자주 사용되는 일부 값들만 들어갈 수 있다.

 

 

위에서 설명한 내용이 기본적인 cpu에서의 캐싱이다.

 

그럼 react query에서의 캐싱은 어떠할까?

 

Stale-While-Revalidate

이 캐싱 매커니즘은 캐싱된 데이터를 유저에게 제공하며, 백그라운드에서 비동기적으로 새로운 데이터를 가져와서 다시 캐시를 업데이트하는 메커니즘이다. 이를 통해 사용자에게 항상 신선한 데이터를 제공함과 더불어 빠른 성능을 유지할 수 있다.

 

stale while revalidate 에서는 캐시 된 과거 데이터를 사용하여 빠르게 화면을 렌더링 할 수 있다. 또한, 동시에 새로운 데이터를 백그라운드에서 가져오고, 새로운 데이터가 사용 가능하다면 캐시를 업데이트한다.

 

react query에서는 다음과 같이 데이터의 상태를 분류한다.

 

1. fresh -> 데이터의 신선함이 보증된 상태이다.

2. fetching -> 서버에 데이터를 요청했지만, 아직 결괏값이 반환되지 않은 상태이다.

3. stale -> 데이터가 신선하지 않은 상태이다.

4. inactive -> 사용되지 않지만 캐싱되어있는 상태이다.

5. delete -> inactive한 데이터 중에서도 시간이 만료되어 제거된 상태이다.

 

사용자가 데이터 요청을 하였을 때에 캐시된 데이터면서 fresh 한 데이터가 존재한다면 로딩 없이 해당 데이터를 내어준다. 만약 캐시되어있지만 stale 한 상태의 데이터라면 서버에 다시 데이터를 요청한다.

 

그럼 데이터가 fresh한지는 어떻게 판단하는 걸까?

 

StaleTime과 CacheTime

 

react query를 사용해보았다면 알겠지만 staleTime과 cacheTime이라는 옵션이 존재한다. cacheTime은 데이터가 캐시에 저장되는 시간을 나타내고, slateTime은 데이터가 유효한 시간을 나타낸다. 즉, slateTime이 지나면 신선하지 않은 데이터라 간주하지만 보관은 계속한다. 하지만 cacheTime은 완전히 데이터를 제거하는 시간인 것이다. 데이터의 유효기간, 만료기간으로 생각하면 될 것이다.

 

(react query 5 버전부터는 cacheTime이 garvage collecting의 약자인 gcTime으로 변경되었다.)

 

Query Key

자. 이제 데이터가 캐시 되는 시간에 대해서는 이해를 했다. 그런데, 시간만 지정한다고 캐싱이 될까? 아니다. 캐싱을 위해서는 각각의 query에 대해 고유한 식별자인 query key까지 지정해야 한다. query key는 데이터를 가져오는 데에 사용되는데, 이를 통해 react query는 어떤 데이터를 캐시 하는지 식별한다.

 

query key는 배열 형태로 관리된다. 배열의 각 항목은 query를 수행하는 데 필요한 정보를 담고 있고, 각 배열은 unique 해야 한다.

 

예를 들어 ['user', 'userName'] 이라는 query key가 존재한다면 이 key로 요청을 할 때에는 이 key에 캐시 된 데이터를 반환한다. ['user', 'userAge'] 라는 key로 요청하면 당연히 다른 결과를 반환할 것이다.

 

 

마치며

오늘은 이렇게 캐싱과 react query에 대해 알아보았다. 기존에 알고 있던 개념들을 확실하게 바로잡을 수 있어서 좋았다. 더불어 react query 5 버전에서 바뀐 사용법들을 맛보기로 살펴봤는데 확실히 좋은 라이브러리라 생각되었다.