[React] React Query 란?

참고

• https://tanstack.com/query/v3/
• https://velog.io/@94applekoo/React-Query-%EC%B4%9D-%EC%A0%95%EB%A6%AC

React-Query 개요

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

React-Query 기능

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

캐싱이란? 데이터를 임시로 저장하여 다음에 필요할 때 빠르게 가져올 수 있도록 하는 기법을 얘기 합니다. 데이터를 요청할 때 마다 API 에 요청하지 않고, 만약 이전에 저장해둔 데이터의 이력이 존재하면 해당 데이터를 사용할 수 있어서 응답 속도가 빠르다는 장점이 있습니다. React-Query 는 캐싱 기능을 제공하여 외부 API로부터 가져온 데이터를 캐싱하고 이를 재사용할 수 있다는 장점이 존재합니다.

React-Query 장단점

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

타 라이브러리

• React-Query 말고도 RTK Query 라는 라이브러리도 있습니다.
• Redux Toolkit 설치한 경우 RTK Query 라는 것도 기본적으로 사용이 가능합니다.
• 하지만 RTK Query 는 React-Query 와 차이점이 있어서 해당 부분은 다음에 다시 정리 진행해 보도록 하겠습니다.