[React-query] 리액트 쿼리 #1

React-query

React Query는 리액트 애플리케이션에서 서버의 데이터를 조회하거나 캐싱, 업데이트, 에러 처리와 같은 비동기 로직을 지원하는 fetching 라이브러리이다. Server-side와 Client-side 사이에서 비동기 로직을 보다 쉽게 다루게 해주며 Server State를 관리해준다.

react-query 라이프사이클

• A 쿼리 인스턴스가 mount 됨
• 네트워크에서 데이터 fetch 하고 A라는 query key로 캐싱함
• 이 데이터는 fresh 상태에서 staleTime(기본값 0) 이후 stale 상태로 변경됨
• A 쿼리 인스턴스가 unmount 됨
• 캐시는 cacheTime(기본값 5min) 만큼 유지되다가 가비지 콜렉터로 수집됨
• 만일 cacheTime이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount되면, fetch가 실행되고 fresh한 값을 가져오는 동안 캐시 데이터를 보여줌

Server state

• fetching
  • 초기상태이며 데이터 요청 상태
• fresh
  • Server-side와 Client-side의 데이터 상태가 동일한 상태
  • 데이터가 만료되지 않은 상태이다.
  • fresh 상태일 때는 컴포넌트의 상태가 변경되더라도 데이터를 다시 요청하지 않는다.
• stale
  • 데이터가 만료된 상태(데이터를 추가, 수정, 삭제 등의 작업을 한 상태로 최신화가 필요한 상태)
  • fresh -> stale로 넘어가는 시간의 Default값은 0이다.
• inactive
  • 사용하지 않는 상태
  • 일정 시간이 지나면 Garbage Collector가 캐시에서 제거함
  • default 값은 5분이다.
• deleted
  • Garbage Collector에 의해 캐시에서 제거된 상태
• staleTime
  • 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간
  • staleTime이 지나지 않았다면 unmount 후 mount 되어도 fetch가 일어나지 않는다.
  • 전달받은 데이터는 react-query의 자료구조 내용 중 cache에 저장이 된다.
  • 이 캐시 데이터의 fresh 상태를 유지해주는 시간을 알려주는 옵션이다.
• cachTime
  • 데이터가 inactive 상태일 때 캐싱된 상태로 남아있는 시간
  • 쿼리 인스턴스가 unmount되면 데이터는 inactive 상태로 변경되며, 캐시는 cachTime만큼 유지된다.
  • cacheTime이 지나기 전에 쿼리 인스턴스가 다시 마운트 되면, 데이터를 fetch하는 동안 캐시 데이터를 보여준다.
  • cacheTime이 지나면 가비지 콜렉터로 수집된다.

❓ 만약 staleTime을 길게 주면?

• 아무리 staleTime이 길어도 저장되는 cacheTime이 짧다면 데이터가 사라진다.
• cacheTime은 staleTime과 관계없이, 무조건 inactive 된 시점을 기준으로 캐시 데이터 삭제를 결정한다.