React-query
React Query는 리액트 애플리케이션에서 서버의 데이터를 조회하거나 캐싱, 업데이트, 에러 처리와 같은 비동기 로직을 지원하는 fetching 라이브러리이다. Server-side와 Client-side 사이에서 비동기 로직을 보다 쉽게 다루게 해주며 Server State를 관리해준다.
fresh
상태에서 staleTime
(기본값 0) 이후 stale
상태로 변경됨cacheTime
(기본값 5min) 만큼 유지되다가 가비지 콜렉터로 수집됨cacheTime
이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount되면, fetch가 실행되고 fresh
한 값을 가져오는 동안 캐시 데이터를 보여줌fetching
fresh
fresh
상태일 때는 컴포넌트의 상태가 변경되더라도 데이터를 다시 요청하지 않는다. stale
fresh
-> stale
로 넘어가는 시간의 Default값은 0이다.inactive
deleted
staleTime
fresh
-> stale
상태로 변경되는데 걸리는 시간staleTime
이 지나지 않았다면 unmount 후 mount 되어도 fetch가 일어나지 않는다.cachTime
inactive
상태일 때 캐싱된 상태로 남아있는 시간inactive
상태로 변경되며, 캐시는 cachTime
만큼 유지된다.cacheTime
이 지나기 전에 쿼리 인스턴스가 다시 마운트 되면, 데이터를 fetch하는 동안 캐시 데이터를 보여준다.cacheTime
이 지나면 가비지 콜렉터로 수집된다.❓ 만약 staleTime을 길게 주면?
- 아무리
staleTime
이 길어도 저장되는cacheTime
이 짧다면 데이터가 사라진다.cacheTime
은staleTim
e과 관계없이, 무조건inactive
된 시점을 기준으로 캐시 데이터 삭제를 결정한다.