React Query란
react-query는 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 다룰 수 있도록 도와주는 라이브러리이다.
react-query는 크라이언트 상태 작업에는 적합하지만, 비동기 또는 서버 상태 작업에는 그다지 좋지 않다고 말한다.
기능
- 캐싱
- 동일한 데이터에 대한 중복 요청을 단일 요청으로 통합
- 백그라운드에서 오래된 데이터 업데이트
- 데이터가 얼마나 오래되었는지 알 수 있다.
- 데이터 업데이트를 가능한 빠르게 반영
- 페이지네이션 및 데이터 지연 로드와 같은 성능 최적화
- 서버 상태의 메모리 및 가비지 수집 관리
- 구조 공유를 사용하여 쿼리 결과를 메모화
Life Cycle
gcTime이 5분이고 staleTime이 0일때
- useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 인스턴스가 마운트 됨
- todo 쿼리 키를 가진 다른 쿼리 인스턴스가 안 만들어졌으면 로딩 상태를 보여주고 데이터 요청이 일어난다.
- 설정한 staleTime이 지나면 stale 상태를 가지게 된다.
- todo 쿼리 키를 가진 2번째 쿼리 인스턴스가 마운트 된다.
- 이전에 todo 쿼리키를 가진 인스턴스가 생성되었으므로 캐시 데이터를 반환한다.
- 새로운 인스턴스는 네트워크 요청을 하게된다. (staleTime이 경과 됐으므로)
- fetchTodos 함수가 같은거랑은 상관없이 같은 쿼리키를 가지면 status도 같이 업데이트 된다.
- 요청이 성공하면 새로운 데이터를 갖게된다.
- 2개의 인스턴스가 언마운트 되서 더 이상 사용되지 않으면 (inactive 상태) 가비지 콜렉팅 하기 위해 gcTime이 활성화된다
- 캐시 타임아웃이 완료 되기 전에 또 다른 todo 쿼리키를 가진 인스턴스가 생성이 되면 fetchTodos가 백그라운에서 실행되는 동안 기존에 있던 캐시 데이터를 반환하게 된다. 요청이 성공하면 새로운 데이터가 캐싱된다.
- 마지막 쿼리 인스턴스가 언마운트 되고 더이상 쿼리 인스턴스가 5분 이내로 나타나지 않으면 가비지 콜렉팅이 된다
staleTime, gcTime
staleTime
fresh 상태에서 stale 상태까지의 기간을 말한다.
query가 fresh하다면 오직 캐시 데이터만 읽어 올 것이고 네트워크 요청은 일어나지 않는다. 만약 stale 상태이면은 기존의 캐시 데이터를 가지지만 백그라운드에서 refetch가 일어나 새로운 네트워크 요청을 하게 된다.
주의
만약 staleTime에 지나도 네트워크 요청이 즉각 일어나는 것은 아니다. staleTime은 캐시 되어있는 데이터가 더 이상 fresh하지 않아서 백그라운드에서 재요청이 필요하다는 정보만 알려준다. 실제로 백그라운드에서 refresh가 발생하려면 trigger의 조건을 충족해야한다. trigger가 일어나는 조건은 다음과 같다.
- 컴포넌트가 마운트 되었을 때
- 윈도우가 포커스 되었을 때
- 네트워크가 재연결 되었을때
gcTime
inactive 상태인 쿼리가 캐시에서 지워지기까지의 기간을 말한다. 기본값은 5분이다.
inactive의 상태가 되려면 같은 쿼리키를 가진 인스턴스를 사용하는 모든 컴포넌트가 언마운트 되어야한다.
왜 gcTime이 staleTime보다 길어야 할까?
const { data } = useQuery(['my-data'], fetchMyData, {
staleTime: 20 * (60 * 1000), // 20 분
gcTime: 15 * (60 * 1000), // 15 분
});위의 쿼리 인스턴스를 사용하는 모든 컴포넌트가 언마운트되면 gcTime이 시작된다. 그리고 16분뒤에 다시 쿼리인스턴스가 마운트되면 staleTime은 아직 안지났기 때문에 캐싱된 데이터를 사용하면 된다. 하지만 캐싱 데이터는 이미 사라져 있으므로 백그라운드에서 네트워크 재요청이 일어난다. 그 시간동안 로딩 상태가 일어난다. 기본적으로 staleTime을 사용하려는 이유는 불필요한 네트워크 요청을 줄이고 캐싱된 데이터를 사용하는 것인데 만약 staleTime이 gcTime보다 길면 그 취지에 맞지 않다고 생각해 그렇게 좋은 방법인지는 잘 모르겠다.
출처
https://ttaerrim.tistory.com/53
https://stackoverflow.com/questions/75211088/if-staletime-is-bigger-than-cachetime-in-react-query-what-happen
https://github.com/ssi02014/react-query-tutorial?tab=readme-ov-file
https://tanstack.com/query/v5/docs/framework/react/guides/caching
