[React Query] React Query 알아보기

 

React Query 알아보기

 

---

 

# React Query란

 

 React Query는 React의 라이브러리로, 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어준다. 기존의 Redux, Recoil과 같은 상태 관리 라이브러리들은 서버 쪽의 데이터들을 관리하기에는 적합하지 않았는데, React Query는 이를 해결해준다. 예를 들어, 두 명의 관리자가 동시에 같은 페이지를 바라보고 있는 상황에서, 한 사람이 데이터를 변경하면 다른 사람도 그 변경된 데이터를 바라볼 수 있어야 한다. React Query는 이런 상황에서 데이터를 용이하게 관리할 수 있도록 서버 측을 도와준다. 또한 React 컴포넌트 내부에서 간단하고 직관적으로 API를 사용할 수 있기 때문에 프론트엔드 입장에서도 편리하다.

 

 

# Redux와 비교

 

 Redux는 API 통신 및 비동기 상태 관리를 위한 라이브러리가 아니다. 그러니 Redux를 사용하여 비동기 데이터를 관리하기 위해서는 관련된 코드를 전부 개발자가 구현해야 한다. 예를 들어 API의 요청 상태가 loading인지, success인지 error인지를 확인하고 싶다면, 관련된 코드를 작성해주어야 한다. 따라서 Redux를 사용해서 API, 비동기 데이터를 관리하면 코드의 양이 많아진다는 단점이 있다. 이때 React Query를 이용하면 API 요청과 비동기 데이터 상태 관리를 쉽고 편하게 할 수 있다.

 

 

# 사용해보기

 

1. index.js에서 QueryClientProvider로 <App />를 감싸준다.

 

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
);

 

 

2. useQuery를 이용하여 API 데이터를 불러온다.

 

import React from "react";
import { useQuery } from "react-query";

fuunction App() {
  const query = useQuery("이름", async () =>
    (
      await fetch(
        "https://API주소"
      )
    ).json()
  );
  
  // 생략
}

 

 기존 React에서는 API 데이터를 불러올 때 useEffect를 사용했지만, React Query를 이용하면 useEffect를 사용하지 않아도 되어서 코드가 훨씬 간결해진다. 이렇게 불러온 query를 콘솔창에 출력해보면 다음과 같다.

 

 

 이렇게 React Query에서 자체적으로 비동기 데이터 처리에 필요한 값들을 반환해준다. loading, status, data 등, 비동기 데이터에 대해 하나하나 변수를 생성하여 확인하지 않고도 쉽게 값을 얻을 수 있다.

 

import React from "react";
import { useQuery } from "react-query";

fuunction App() {
  const { status, data } = useQuery("이름", async () =>
    (
      await fetch(
        "https://API주소"
      )
    ).json()
  );
  
  // 생략
}

 

 이렇게 중괄호를 이용하여 원하는 값만을 빼서 사용하면 비동기 데이터를 훨씬 간편하게 사용할 수 있다.

 

---

 

참고 자료

https://tanstack.com/query/latest

https://tech.kakao.com/2022/06/13/react-query/

https://tech.kakaopay.com/post/react-query-1/