1. 캐시

데이터를 미리 복사해두어 백엔드에 요청할 필요없이 빠르게 가져올 수 있다.

1. 속도를 높일 수 있다.
2. 네트워크 비용을 절약할 수 있다.

2. react-query의 캐시

1) 리액트 쿼리의 데이터 라이프 사이클

const result = useQuery({ queryKey: ['임의 설정'], queryFn: getPosts });
  console.log(result);

컴포넌트가 랜더링 되었을 때 useQuery()가 실행되는데 이때 queryKey에서 설정한 키의 이름으로 캐시에 저장된다. 이는 리액트 쿼리 개발자도구에서 확인가능

데이터의 상태

useQuery()가 실행되었을 때 이미 같은 쿼리키로 저장된 캐시가 있으면 저장된 데이터의 상태에 따라 다르게 동작한다.

• fresh : 이제 막 데이터를 받아와 캐시에 저장된 상태
• stale : 특정시간이 지난 상태(stale time)
• inactive : 컴포넌트가 언마운트되면(DOM트리에서 제거) 해당 데이터는 쓰지않는 상태

---

• 데이터가 fresh 상태라면 캐시에 저장된 데이터를 리턴
• stale 상태면 백그라운드에서 refetch를 진행하고 새로 받아온 데이터로 기존의 저장된 데이터를 갱신
  새로운 쿼리 인스턴스가 마운트(refetchOnMount)
  브라우저 창에 다시 포커스가 간다(refetchOnWindowFocus)
  네트워크가 다시 연결(refetchOnReconnect)
  미리 설정해둔 refetch interval 시간이 지났을 때(refetchInterval)
  위 상황에서는 괄호 안의 옵션을 변경

Stale Time

기본값은 0으로 데이터를 받아오면 바로 stale 상태가 되고 매번 refetch를 하게 된다.
상황에 따라 stale time을 변경해주어야한다.

Garbage Collection Time

캐시에 저장된 필요없는 데이터를 삭제해 공간을 만들어줘야한다.

inactive 상태의 데이터는 가비지 컬렉션 타임(garbage collection time)이 지나면 캐시에서 삭제.
기본 시간은 5분이며 수정이 가능하다.

라이프 사이클 정리

1. useQuery()가 실행되는 컴포넌트가 마운트되면
2. useQuery()가 실행되고 쿼리함수가 실행되어 데이터를 받아온다.
3. 쿼리 키를 통해 캐시에 저장이 되고
4. 처음에 fresh 상태이지만 staleTime이 지나고 stale 상태가 된다.
5. 유저가 데이터를 요청했을 때 캐시 데이터가 fresh면 그대로 보여주고 stale 상태면 refetch를 진행하여 새로운 데이터를 보여준다.
6. 컴포넌트가 unmount 되면 inactive 상태가 되고 gc time이 지나면 삭제된다.

라이프 사이클 시간 설정

const result = useQuery({
    queryKey: ['임의설정'],
    queryFn: getPosts,
    staleTime: 60 * 1000, // 1분 : 1000(1초) * 60(60초)
    gcTime: 60 * 1000 * 10, // 10분 : 1000(1초) * 60(60초) * 10(10분)
  });

기본적으로 stale time은 0, gc time은 5분이다.
이 값을 변경하기 위해 옵션값을 변경해주면 되는데 (위 코드 참고)
모두 밀리초가 기준이라 1000은 1초이다.