Cache Data?

cache란? 아래와 같이 은닉하다. 무언가 잠시 숨겨둔다. 라는 의미를 가지고있다.

그럼 Cache Data는 데이터를 잠시 숨겨둔다.라는 의미를 가진다.

Life Cycle?

life cycle은 생명 순환(주기)다.

Cache Data Life Cycle ?

잠시 숨겨둔 데이터의 생명 순환

더 자세히 알아보자!!

Cache Data Life Cycle

아래 이미지가 모든 것을 의미하고있다.

동그라미 순서대로 알아보면서 어떤 구조로 순환되는지 알아보자!
Cache Data Life Cycle은 크게 active상태와 inactive상태로 나뉜다.
이름에서 알 수 있듯이 활성화 상태 비활성화 상태를 의미한다.
순서대로 알아보자!

1. fetching

• 이름에서 알 수 있듯이 데이터를 fetching하는 단계다.
• fetching하는 순간 caching된다.
• 데이터를 fetching할 때 useQuery 혹은 useInfiniteQuery option에 staleTime과 gcTime을 넣을 수 있다.

※ staleTime

caching된 데이터가 stale상태 즉, 썩은 상태가될 때까지 걸리는 시간을 설정하는 option이다.
초기 값은 0이며, 아무런 설정을 하지않으면 곧바로 stale상태가된다.
위 이미지에서 처럼 staleTime이 0보다 크면 fresh상태 신선한 데이터 상태가된다.

※ gcTime

caching된 데이터가 inactive상태가 되었을 때 inactive에서 deleted제거 될 때까지 걸리는 시간을 설정하는 option이다.
초기 값은 5분이며, 아무런 설정을 하지않으면 inactive에서 5분뒤에 cache data에서 deleted제거된다.

2. fresh

• 데이터가 정상적으로 caching된 상태다.
• fresh상태인 caching data는 다시 데이터를 fetching할 필요가 없다.

3. stale

• 데이터 caching이 만료된 상태다. staleTime이 지난 상태다.
• stale상태인 caching data는 다시 데이터를 fetching해야한다.

4. inactive

• 컴포넌트가 unmount된 상태다. 즉, 데이터(쿼리)를 더이상 사용하지 않는 상태를 의미한다.

5. deleted

• chaching data에서 완전히 delete된 상태를 의미한다. 앞서 알아본 gcTime이 지나면 완전히 delete된다.

default config(기본 설정)

기본 설정	의미
staleTime: 0	useQuery 또는 useInfiniteQuery에 등록된 queryFn을 통해 fetch 받아온 데이터는 곧바로 stale data 취급
refetchOnMount: true	useQuery 또는 useInfiniteQuery가 있는 컴포넌트가 마운트 시 stale data를 refetch 자동 실행
refetchOnWindowFocus: true	실행 중인 브라우저 화면을 focus 할 때마다 stale data를 refetch 자동 실행
refetchOnReconnect: true	Network가 끊겼다가 재연결되었을 때 stale data를 refetch 자동 실행
gcTime(cacheTime): 5분 (1000 60 5 ms)	useQuery 또는 useInfiniteQuery가 있는 컴포넌트가 numount되었을 때 inactive query라 부르며, inactive 상태가 5분 경과 후 GC(가비지 컬렉터)에 의해 cache data 삭제 처리
retry: 3	useQuery 또는 useInfiniteQuery에 등록된 queryFn이 API 서버에 요청을 보내 실패하더라도 바로 에러를 띄우지 않고 총 3번까지 재요청을 자동으로 시도