React Query란?

React Query란?

• React-Query 는 리액트 애플리케이션에서 서버 상태 가져오기캐싱동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리 이다.
• 클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어 졌다.
• React-Query 에서는 기존 상태 관리 라이브러리인 redux, mobX 가 클라이언트 상태 작업에 적합하지만, 비동기 또는 서버 상태 작업에는 좋지 않다는 평가이다.
• 클라이언트 상태와 서버 상태는 완전히 다른 개념이며, 클라이언트 상태는 각각의 input 값으로 예를 들 수 있고, 서버 상태는 데이터 베이스에 저장되어 있는 데이터로 예를 들 수 있다.
• Axios나 Fetch API와 같은 데이터 fetching 라이브러리와 원활하게 작동하도록 설계되어 있다.

React Query 기능

1. 캐싱
2. 동일한 데이터에 대한 중복 요청을 단일 요청으로 통합
3. 백그라운드에서 오래된 데이터 업데이트
4. 데이터가 얼마나 오래 되었는지 확인 가능
5. 데이터 업데이트 빠르게 반영
6. 페이지네이션 및 데이터 지연 로드와 같은 성능 최적화
7. 서버 상태의 메모리 및 가비지 수집 관리
8. 구조 공유를 사용하여 쿼리 결과를 메모화

React Query 장점과 단점

• server-state (DB 데이터)를 프론트엔드에서 실시간 동기화해주는걸 도와준다.
• 하지만 ajax 요청을 몇 초마다 계속 날려서 가져오는 방식이라 좀 비효율적일 수 있다.
• 실시간 서버에서 데이터를 자주 보내려면 웹소켓이나 Server-sent events 같은 가벼운 방식들도 있다.
• 그래서 React-Query는 ajax 관련 기능개발 편하게 할 수 있는데 더 의의가 있다.

React Query 설치

// npm
$ npm i react-query
// yarn
$ yarn  add react-query

- CDN

<script src="https://unpkg.com/react-query/dist/react-query.production.min.js"></script>