리액트 쿼리는 데이터의 캐시 처리를 간편하게 할 수 있는 인터페이스를 제공함
- 몇 초 이후에는 데이터가 유효하지 않은 것으로 간주하고 데이터를 다시 불러옴
- 데이터에 변경점이 있는 경우에만 리렌더링 유발
- 유저가 탭을 이동했다가 다시 돌아왔을 때 데이터를 다시 불러온다
- 데이터를 다시 호출할 때, 응답이 오기 전까지는 이전 데이터를 계속 보여준다.
→ 필요에 따라서는 로딩바와 같은 대안 UI를 보여주기 위해 loading state를 기본적으로 제공
기존 프론트엔드 상태 관리 라이브러리
- Redux
- Recoil
- React Query
- Recoil
- Mobx
- SWR
배민, 카카오페이 등에서 도입
서버 상태에서 생기는 문제
- 캐싱
- 같은 데이터 요청 중복 제거
- 언제 out of date 되는지 알아내기
- out of date 된 데이터 백그라운드에서 업데이트
- 최대한 빠르게 업데이트 반영하기
- paginatiom, lazy loading 등 성능 최적화
- 서버 상태의 메모리, garbage collection 관리
- structural sharing으로 쿼리 결과 memoizing
- etc…
리액트 쿼리와 캐싱
stale while revalidate
→ 캐싱된 데이터를 사용자에게 제공하면서, 비동기적으로 콘텐츠를 서버에서 revalidate
→ 오래된 데이터가 데이터가 없는 것보다 낫다!
쿼리 클라이언트를 선언해 주고, 쿼리 클라이언트의 props로 queryClient를 전달해주게 되면
하위 컴포넌트에서 쿼리 클라이언트에 접근할 수 있음
쿼리 클라이언트에서는 전역적으로 옵션을 설정할 수 있음
queries와 mutations에 대한 옵션을 설정해 줌
quries : 서버에서 데이터를 받아올 때 사용하는 기능
queryKey : 캐시를 관리하기 위한 키값으로 배열 형태로 사용
→ string 형태로 해쉬해 key와 data를 mapping시켜 관리
queryFn : promise를 반환하는 함수 (fetch, axios 등)
→ data를 resolve하고 error를 던짐
