react-query
react-query는 서버 상태 관리를 쉽게 하도록 도와주는 라이브러리.
서버 상태관리를 어떻게 쉽게해주는가?
- fetching: 서버에서 데이터 받아오기
- caching: 서버에서 받아온 데이터를 따로 보관해서 동일한 데이터가 단 시간 내에 다시 필요할 시 서버요청 없이 보관된 데이터에서 꺼내 쓴다.
- synchronizing: 서버상의 데이터와 보관 중인 캐시 데이터(서버 상태)를 동일하게 만든다.
- updating: 서버 데이터 변경이 용이하다.
stale-while-revalidate(swr) 전략
- 신규 데이터 도착하는 동안 기존 캐싱된 데이터를 사용하는 전략
- 헌것을 먼저 쓰다가 새것을 받아오면 새것을 쓴다.
react-query의 캐시 데이터는 어디에 있는가?
QueryClientProvider는 React context API를 내부적으로 사용한다.
QueryClientProvider의 자식으로 있는 모든 컴포넌트들은 캐시 데이터에 접근할 수 있다.
페이지 컴포넌트 외부에 상태가 존재한다는 점에서 캐시 데이터는 전역 상태라 볼 수 있다.
react-query와 tanstack-query 차이
- tanstack query란?
- React Query의 v4 버전 부터 라이브러리 명이 'tanstack Query'로 변경되었다.
리액트 뿐 아니라 다른 라이브러리 또는 프레임워크에도 적용할 계획으로 바꿨다.
useQuery('todos', getTodos); ❌ v4에서 에러 발생
useQuery(['todos'], getTodos); ✅ 정상 동작‼ v4 부터는 query key는 반드시 배열형태로 사용해야한다.
흠..