[React] React Query 시작하기

React Query란?

React Query란 데이터를 가져오고 관리하는 라이브러리이다. 

React 애플리케이션에서 Redux 또는 Recoli과 같이 전역 상태 관리 라이브러리를 통해 데이터 관리하는 데에 수월함을 느낄 수 있었다.

그러나 이러한 라이브러리는 클라이언트 측 데이터를 관리하기에는 적합할지라도 서버 측 데이터를 관리하기에는 적합하지 않았다. 이러한 문제점을 해결해 주기 위해 React Query 라이브러리가 등장했으며 서버 측 데이터에 의존성이 높은 애플리케이션은 React Query 라이브러리를 사용한다.

💡 React Query는 서버 상태를 관리하기 위한 라이브러리이다.

 

React Query와 Redux의 차이점

React Query와 Redux 모두 React 애플리케이션의 상태 관리를 위한 라이브러리이다.

그러나 두 라이브러리는 목적과 사용방법에 차이가 있다.

 

	Redux	React Query
목적	중앙 집중화된 상태 관리 라이브러리	데이터 요청 및 관리 라이브러리
사용 방법	action, reducer, store 등을 사용	React Hooks를 사용
데이터 캐싱	일반적으로 데이터를 캐싱하지 않는다.	브라우저 캐시 및 자체 캐시를 사용하여 이전에 기져온 데이터를 저장하고, 불필요한 네트워크 요청을 줄일 수 있다.
비동기 작업 처리	Redux Thunk, Redux Saga와 같은 미들웨어를 사용하여 비동기 작업 처리	내장된 비동기 처리 기능 제공
상태 변경 로직	순수 함수 reducer에서 처리	컴포넌트 내에서 처리

💡 즉, Redux는 상태 관리에 초점을 맞추고, React Query는 데이터 요청 및 관리에 초점을 맞추고 있다.

 

React Query를 사용하면?

• 선언적인 API: React Query는 선언적인 API를 제공하여, 데이터 가져오기와 관리를 간단하고 명확하게 처리할 수 있다.
  • 컴포넌트에서 useQuery, useMutation과 같은 React Hooks를 사용하여 API를 호출하고, 결과를 처리할 수 있다.
• 캐싱: React Query는 브라우저 캐시와 자체 캐시를 사용하여 이전에 가져온 데이터를 저장하고, 불필요한 네트워크 요청을 줄일 수 있다. 또한, 캐시 설정을 변경하여 데이터의 유효 기간과 캐시 정책을 조정할 수 있다.
• 오류 처리: React Query는 오류 처리를 간단하게 처리할 수 있도록 지원한다.
  • API 요청에서 오류가 발생하면, 오류 정보를 제공하고, 재시도 기능을 제공하여 네트워크 오류를 처리할 수 있다.
• 비동기 작업 처리: React Query는 내장된 비동기 처리 기능을 제공한다.
  • 이를 통해 비동기 작업을 간단하게 처리할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있다.
• 서버 사이드 렌더링: React Query는 서버 사이드 렌더링과 호환되는 구조를 가지고 있다.
  • 이를 통해 초기 상태를 서버에서 렌더링 할 수 있으며, 초기 로딩 속도와 검색 엔진 최적화에 도움을 준다.
• 상태 관리:  React Query는 상태를 중앙 집중화하지 않지만, 상태 관리를 간단하게 처리할 수 있도록 지원한다.
  • 상태 변경 로직은 컴포넌트 내에서 처리하며, useQuery, useMutation과 같은 React Hooks를 사용하여 상태를 업데이트할 수 있다.

💡 React Query를 사용하면 데이터 가져오기와 관리를 간단하게 처리할 수 있으며, 선언적인 API와 캐싱, 오류 처리, 비동기 작업 처리 등의 기능을 제공한다.

 

** 데이터 요청 및 관리 라이브러리 SWR과는 어떻게 다를까?

# SWR

SWR란 Next JS에서 개발한 데이터 요청 관리 라이브러리이다.

SWR는 내부적으로 Axios를 사용하여 HTTP 요청을 보내며, 응답이 완료되면 데이터를 캐시 하는 방식이다.

이후에 같은 요청이 발생하면 캐시된 데이터를 사용하고, 동시에 서버에서 데이터를 가져와 캐시를 업데이트한다.

 

SWR 또한 React Hooks를 사용하여 구현되어 있으며 useSWR 훅을 사용한다.

useSWR 훅을 통해 isLoading, isError, data와 같은 상태를 가져올 수 있다.

또한, mutate 함수를 사용하여 데이터를 업데이트하고 revalidate 함수를 사용하여 데이터를 다시 가져올 수 있다.

 

# SWR vs React Query

	SWR	React Query
데이터 업데이트 방식	브라우저에서 데이터를 캐시하고, 자동으로 업데이트하며, 실시간으로 데이터를 가져오는 기능을 제공한다.	데이터를 캐시하고, 자동으로 업데이트하고, 요청을 취소할 수 있는 기능을 제공한다.
구조	useSWR 훅 하나를 제공하며 훅 하나에서 데이터를 가져오고 업데이트한다.	query와 mutation을 구분하며 서로 다른 훅을 제공한다. useQuery는 데이터를 가져오는 기능을, useMutation은 데이터를 업데이트하는 기능을 한다.
서버 사이드 렌더링	서버 사이드 렌더링 미지원 Next JS에서 getStaticProps 또는 getServerSideProps와 함께 사용 가능	서버 사이드 렌더링 지원 서버에서 초기 데이터를 가져와 클라이언트에 전달 후 브라우저에서 데이터를 업데이트할 때 사용

💡 React Query는 데이터를 캐시하고, 자동으로 업데이트하며, 성능을 최적화할 수 있는 강력한 기능을 제공한다.
💡SWR은 데이터를 빠르게 가져오고, 업데이트할 수 있는 기능을 제공하지만, React Query만큼 다양한 기능을 제공하지는 않는다.

 

 

출처

https://tanstack.com/query/v3/docs/react/overview

Overview | TanStack Query Docs