React-Query 에 대해서 알아보자 🔥🔥🔥

React-Query

---

React-Query 는 React 애플리케이션에서 데이터를 상태 관리하기 위한 라이브러리이다.

보통 React 애플리케이션에서는 상태 관리를 하는 데이터를 두 가지로 나눌 수 있다.

1. 내 컴퓨터에서 사용하는 데이터인 클라이언트 상태 데이터
2. 서버에서 가져오는 데이터, 서버 상태 데이터

React-Query 는 서버에서 가져오는 상태 데이터를 관리하기 위해서 사용되는 라이브러리이다.

API 호출 및 상태 관리를 처리하여 데이터를 캐시하고 쿼리를 관리하는데 사용된다.

리액트쿼리의 가장 큰 장점은 이렇다.

서버 상태 데이터는 몇 가지 특징을 가지고 있다. 서버에서 데이터를 받아오기까지 시간이 걸리기에 개발자는 데이터를 받아오는 걸

비동기식으로 구현한다. 데이터를 받아 오는 과정에서 로딩, 에러 처리를 유저에게 어떻게 안내해 줄 것인지 고민이 필요한 순간이다.

또한 서버 상태 데이터는 가능한 최신 상태로 유지해야하는데, 데이터를 한번 받아 오면 끝이 아니라 최신 데이터를 가능한 계속 받아 와야 한다.

주식 사이트같은 경우 1분 1초가 중요하기에 실시간으로 데이터를 받아오는 게 중요하고

다른 사이트들은 주식 사이트와 다르게 매 초마다 실시간으로 데이터를 받아오지 않아도 된다.

이처럼 서버 데이터들의 특성에 맞게 구현하고 데이터들을 관리하기 수월하게 React Query 의 사용률이 늘어났다.

React Query 는 데이터를 가져오는 과정에서 로딩과 에러 처리를 쉽게 구현할 수 있도록 여러 값을 제공해주며

정해진 시간 혹은 조건마다 서버 상태 데이터를 최신으로 가져오는 작업도 알아서 해준다.

또한, 캐시를 사용해 매번 서버에서 데이터를 가져올 필요 없이 유저에게 더 빠른 데이터를 보여준다.

설치

---

리액트 쿼리

npm install @tanstack/react-query 

// App.js

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import HomePage from "./HomePage";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <HomePage />
    </QueryClientProvider>
  );
}

export default App;

QueryClientProvider 를 통해 App 컴포넌트의 자손 컴포넌트에 전달해 줄 수 있다. QueryClient 로 새로운 쿼리 클라이언트를 만들어 지정해준다.