우리끼리 풀기 아까워 올리는 React Query 퀴즈 – (1) staleTime & cacheTime

안녕하세요, 프론트엔드 엔지니어 셀리나입니다. 라이너는 일주일에 한 번씩 각 플래닛마다 위클리 미팅을 진행하고 있습니다. 엔지니어링 플래닛은 미팅 시간을 활용해 매주 한 사람씩 돌아가며 리액트 쿼리에 대한 내용을 발제하였고, 주가 거듭될수록 우리끼리만 풀기 아깝다는 생각이 들어 리액트 쿼리 퀴즈를 블로그에도 올리기로 했습니다.

이번주에는 리액트 쿼리의 라이프 사이클과 관련한 퀴즈를 준비했습니다.
개념을 간단하게 소개한 뒤 바로 퀴즈를 풀도록 하겠습니다.

쿼리 라이프 사이클을 아시나요?

쿼리 인스턴스 마운트 ➡️ 데이터 fetching & 캐싱
➡️ fresh 상태에서 staleTime 이후  stale 상태로 변경
➡️ 인스턴스가 언마운트 되는 순간부터 cacheTime(5분+)만큼 유지되다가
가비지 콜렉션(GC) 처리됩니다.

리액트 쿼리 라이프 사이클

위에서 나온 staleTime, cacheTime 개념을 간단하게 설명하자면,

Stale Time

데이터가 fresh 에서 → stale 상태로 변경되는데 걸리는 시간입니다. (디폴트 0)

useQuery("randomNumber", getRandomNumber, {
  staleTime: 60 * 1000,
})

Cache Time

데이터가 inactive 상태일 때 캐싱된 상태로 남아있는 시간입니다. (디폴트 5분)
V4부터는 infinite도 지원한다고 합니다.

useQuery("randomNumber", getRandomNumber, {
  cacheTime: 60 * 1000,
});

바로 퀴즈 시작해볼까요?

같은 쿼리 인스턴스를 불러오는 버튼1, 버튼2가 있습니다.
해당 쿼리 인스턴스는 3초 후에 랜덤한 숫자를 가져옵니다.
fetch 중에는 “Loading” 이라는 텍스트가 화면에 나타납니다.
fetch가 완료되면 불러온 데이터를 화면에 보여줍니다.
(useQuery의 디폴트 옵션을 적용한다고 가정합니다.)

Q1.

버튼 1을 클릭해 데이터를 가져오고, 30초 뒤 버튼 2를 누르면 화면에는 어떤 결과가 일어날까요?

staleTime: 1초,
cacheTime: 3분,

(A) 텍스트 “Loading” → 새로 받아온 결과
(B) 캐시된 결과 → 새로 받아온 결과

Q2.

버튼 1을 클릭해 데이터를 가져오고, 30초 뒤 쿼리 인스턴스를 언마운트 했다.
이후 1분 뒤 쿼리 인스턴스를 다시 마운트 하면 쿼리 인스턴스의 상태는 어떻게 될까요?

staleTime: 3분,
cacheTime: 5분,

(a) fresh
(b) stale → 바로 fetching
(c) stale → staleTime이 지나면 fetching

Q3.

버튼 1을 클릭했을 때 fetching 후 fresh 상태에서 stale로 넘어가는데
이 때 언마운트를 하게 되면 inactive 상태로 넘어가게 됩니다.

cacheTime이 지나지 않았을 때 버튼 1을 다시 누르면 화면의 텍스트는 어떻게 나타날까요?

(a) “Loading” → 새로 받아온 결과
(b) 캐시된 결과 → 새로 받아온 결과
(c) 캐시된 결과 유지

Q4.

staleTime이 3분, cacheTime이 5분인 쿼리 인스턴스가 있습니다.
데이터가 fetching된 지 4분이 지났을 때 인스턴스를 언마운트 했습니다.
언마운트한 순간으로부터 캐싱된 결과가 사라지는데 시간이 얼마나 걸릴까요?

정답 공개

Q1. (b) 캐시된 결과 → 새로 받아온 결과

이미 stale 상태인 데이터가 있기 때문에 잠시 이를 보여주고 fetching이 완료되면 새로 받아온 데이터를 보여줍니다.

Q2. (a) fresh

데이터가 fresh 에서 → stale 상태로 변경되는데 걸리는 시간은 5분이기 때문에 fresh 상태가 아직까지 유효합니다.
따라서 새롭게 fetching 되지 않습니다.

Q3. (b) 캐시된 결과 → 새로 받아온 결과

cacheTime이 지나지 않아 캐시된 결과를 화면에 보여줄 수 있습니다. staleTime이 지났으니 다시 fetching합니다.

Q4. 5분

인스턴스가 언마운트 되는 순간부터 cacheTime만큼 유지되다가 가비지 콜렉션(GC)됩니다. 즉 캐싱된 결과가 사라지는 데까지 5분 걸립니다.

재밌게 풀어보셨나요?
React Query 퀴즈 – (2)와 함께 다시 찾아뵙겠습니다. ☺️ ✨