최근 상대적으로 무겁고 러닝커브가 높은 상태관리 라이브러리들(Redux가 대표적)에서 React Query로의 전환 사례가 많다고 들었다
그래서 많이 사용되는 React query를 배우면서 정리해보려고 한다
사용하는 이유
- 서버와 클라이언트의 상태가 명확하지 않게 되는 상황을 방지하고자 함
- A라는 상태가 서버에서 받아온 최신의 상태인지 확정할 수 없음
- 클라이언트에서는 최신이지만, 서버에서는 이미 지난 과거의 상태일 수 있음
- 상대적으로 가볍고 러닝커브도 높지 않아 진입장벽이 낮다
장점
- React hook과 사용하는 구조가 비슷함
- 동일 데이터 요청이 여러번 들어가도 한번만 요청하여 불필요한 낭비를 방지함
- 옵션을 통해 재호출 가능 시간을 설정하여, 그 시간 이후 재호출도 가능함
- get 요청으로 받아온 데이터가 update되면 자동적으로 재요청하여 갱신함
- useEffect의 deps의 설정과 유사함
- get 요청하여 받아온 데이터가 일정 시간이 지나면 재요청함
- 무한 스크롤 기능을 지원함(useInfiniteQuery)
- react suspense와 함께 사용하여 비동기를 좀 더 선언적으로 사용할 수 있음
대표적인 api
- useQuery: get요청
- unique-key: queryKey를 배열로 넣어 query함수 내부에서 변수로 사용할 수 있음
- 'enabled: !!인자명' : 동기적 실행 옵션, 인자가 true일때만 실행함
- useMutation: post, update 등등(get을 제외한 거의 모든 요청)
- update후 get실행: update 요청이 성공할 때, 맵핑된 get 함수를 invalidateQueries에 넣어 바로 get 요청이 가능함
- useQueries: 여러개의 비동기 요청을 묶어서 실행(promise.all과 유사)
- queryCache: 쿼리의 성공, 실패에 대한 전처리 작업을 수행함
