[React] react-query(TanStack Query) 사용법

React Query란?

React Query는 서버 상태 관리를 쉽게 해주는 라이브러리로,

캐싱, 동기화, 백그라운드 데이터 가져오기 등을 간편하게 처리할 수 있습니다.

반응형

React Query 설치

React Query는 @tanstack/react-query 패키지를 설치하여 사용할 수 있습니다.

다음 명령어를 사용해 설치합니다.

# npm 사용 시
npm install @tanstack/react-query

# yarn 사용 시
yarn add @tanstack/react-query

 

QueryClient 설정

React Query를 사용하려면 QueryClient를 생성하고 QueryClientProvider로 감싸야 합니다.

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

const queryClient = new QueryClient();

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

 

React Query Devtools 설치 및 사용

React Query의 상태를 시각적으로 확인하려면 @tanstack/react-query-devtools를 설치하면 됩니다.

# npm 사용 시
npm install @tanstack/react-query-devtools

# yarn 사용 시
yarn add @tanstack/react-query-devtools

 

설치 후 ReactQueryDevtools를 QueryClientProvider 내부에 추가합니다.

import React from "react";
import { useQuery } from "@tanstack/react-query";

const UserList = () => {
  const { data, isLoading, error } = useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      );
      return response.json();
    },
  });

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>에러 발생</div>;

  return (
    <div>
      <ul>
        {data.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

 

결과 화면

---

이제 React Query와 Devtools를 활용하여 효율적으로 데이터를 관리해보세요!