react-query
- 서버 상태를 불러오고, *캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리
- 리액트 컴포넌트 내부에서 간단하고 직관적으로 api를 사용할 수 있다
- 캐싱을 통해 동일한 데이터에 대한 반복적인 비동기 데이터 호출을 방지하고, 불필요한 api콜을 줄여 서버에 대한 부하를 줄이는 좋은 결과를 가져옴
- 최신의 데이터를 fresh한 데이터, 기존의 데이터를 stale한 데이터라고 부름
- 기본적으로 GET은 useQuery, 여러번의 GET요청은 useQueries, POST,PUT,UPDATE,DELETE에는 useMutation이 사용된다
*캐싱이란 특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 높이는 것을 말한다.
필요한 상황에 적절하게 데이터를 갱신해주는 상황
1. 화면을 보고 있을 때
2. 페이지의 전환이 일어났을 때
3. 페이지 전환 없이 이벤트가 발생해 데이터를 요청할 때
react-query Option
- 브라우저에 포커스가 들어온 경우(refreshOnWindowFocus) // default: true
- 새로운 컴포넌트 마운트가 발생한 경우(refetchOnMount) // default: true
- 네트워크 재연결이 발생한 경우(refetchOnReconnect) // default: true
- 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간(staleTime), //default: 0
- fresh 상태일때는 refetch트리거(위의 3가지 경우)가 발생해도 refetch가 일어나지 않는다
- 기본값이 0이므로 따로 설정해주지 않는다면 refetch 트리거가 발생했을 때 무조건 refetch가 발생한다- 데이터가 inactive한 상태일 때 캐싱된 상태로 남아있는 시간(cacheTime), //default: 5분 (60 5 1000)
- 캐싱된 데이터를 계속 보여주는게 아니라 fetch하는 동안 임시로 보여준다는 것
:D