React-Query

1. React-Query

React 애플리케이션에서 서버 상태를 쉽게 관리하고 비동기 데이터를 처리하기 위한 라이브러리, 서버로부터 데이터를 가져오고, 캐싱, 동기화, 리페칭 등의 복잡한 작업을 자동화하여 데이터 fetching을 간소화

React Query는 기본적으로 API 요청을 효율적으로 처리하고, 서버 상태를 클라이언트에서 쉽게 관리할 수 있게 한다.

React Query

# npm
npm install @tanstack/react-query

# yarn
yarn add @tanstack/react-query

 

 

2. 설치 후 기본 설정

import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

// QueryClient 인스턴스 생성
const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

 

• QueryClient는 React Query의 핵심 객체로, 데이터를 캐시하고 상태를 관리
• QueryClientProvider는 QueryClient를 애플리케이션에 제공하는 상위 컴포넌트

 

3. useQuery

서버에서 데이터를 가져오는 작업을 처리하는 훅

서버 상태를 읽기 전용으로 관리하며, 데이터를 fetch하거나 캐싱하고, 리페칭을 자동으로 처리한다.

import {useNavigate} from "react-router-dom";
import {useQuery} from "@tanstack/react-query";

type RepositoryData = {
    language: string;
    network_count: number;
    open_issues: number;
    watchers: number;
}

const CashingTest = () => {
    const navigate = useNavigate();
    const {data, error, isLoading, isError, isSuccess} = useQuery<RepositoryData, Error>({
        queryKey: ["repoData"],
        queryFn: () =>
            fetch("https://api.github.com/repos/TanStack/query")
                .then((res) => {
                    if (!res.ok) {
                        throw new Error("Network response was not ok");
                    }
                    return res.json();
                })
    });

    const onClickBtn = () => {
        navigate("/");
    }

    if (isLoading) return <div>Loading...</div>;
    if (isError) return <div>An error has occurred: {error.message}</div>;

    return (
        <div>
            {isSuccess && data && (
                <div>
                    <h1>{data.language}</h1>
                    <p>{"network_count : " + data.network_count}</p>
                    <strong>{"oepn issues " + data.open_issues}</strong>
                    <br/>
                    <strong>👀 {data.watchers}</strong>{" "}
                </div>
            )}
            <button onClick={onClickBtn}>Go Back</button>
        </div>
    );
}

export default CashingTest;

주요 옵션

• queryKey: 데이터를 식별하는 고유한 키로, 배열 형태로 사용한다. 이 키는 데이터 캐싱, 리페칭, 동기화 등에서 사용된다.
• queryFn: 데이터를 fetching할 함수. 보통 fetch, axios 또는 사용자 정의 비동기 함수를 사용한다.
• enabled: 조건에 따라 쿼리 실행 여부를 결정한다. 예를 들어, 특정 조건이 참일 때만 쿼리를 실행하도록 설정할 수 있다.
• staleTime: 데이터가 "stale" 상태로 간주되기 전에 캐시된 데이터를 얼마나 오랫동안 유효하게 유지할지 설정한다. 기본값은 0으로, 데이터는 즉시 stale 상태가 된다.
• cacheTime: 캐시된 데이터를 얼마나 오래 유지할지를 설정한다. 이 시간이 지나면 React Query는 해당 데이터를 자동으로 삭제한다.

상태 반환 값

• isLoading: 데이터가 로딩 중인 상태
• isError: 에러가 발생했는지 여부
• data: 서버로부터 받은 데이터를 포함한다.
• error: 에러가 발생한 경우, 에러 객체를 반환
• isSuccess: 쿼리가 성공적으로 완료된 상태
• isFetching: 데이터를 가져오는 중인지 여부를 나타낸다. isLoading과 다르게, 캐시된 데이터를 리페치할 때도 true가 된다.

 

4. useMutation

데이터를 수정하거나 생성하는 작업에 사용되는 훅

useQuery가 주로 읽기 작업에 사용된다면, useMutation은 POST, PUT, DELETE와 같은 서버 상태를 변경하는 작업을 처리한다.

import { useMutation } from '@tanstack/react-query';

const createData = async (newData: string) => {
  const response = await fetch("https://api.example.com/data", {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ data: newData }),
  });

  if (!response.ok) {
    throw new Error("Failed to create data");
  }
  return response.json();
};

function MyComponent() {
  const { mutate, isLoading, error, isSuccess } = useMutation(createData);

  const handleCreate = () => {
    mutate("New Data");  // 서버에 데이터를 보내는 작업
  };

  return (
    <div>
      <button onClick={handleCreate} disabled={isLoading}>
        {isLoading ? 'Creating...' : 'Create Data'}
      </button>
      {isSuccess && <div>Data created successfully!</div>}
      {error && <div>Error: {error.message}</div>}
    </div>
  );
}

주요 옵션

• mutationFn: 서버에 데이터를 보내거나 변경하는 비동기 함수이다. POST, PUT, DELETE와 같은 HTTP 요청을 처리할 수 있다.
• onMutate: 뮤테이션이 실행되기 직전에 호출되는 콜백 함수. 일반적으로 데이터 변경을 시작하기 전에 UI 상태를 설정하거나 최적화할 때 사용한다.
• onError: 뮤테이션 중 에러가 발생했을 때 호출된다.
• onSuccess: 뮤테이션이 성공적으로 완료되었을 때 호출된다.
• onSettled: 뮤테이션이 성공하든 실패하든 실행되는 콜백 함수. 주로 useQuery와 같이 데이터를 갱신하는 데 사용된다.

상태 반환 값

• mutate: 뮤테이션을 실행하는 함수. 일반적으로 클릭 이벤트나 특정 조건에 따라 호출된다.
• isLoading: 뮤테이션이 진행 중인 상태
• isSuccess: 뮤테이션이 성공적으로 완료된 상태
• isError: 뮤테이션이 실패한 상태
• error: 뮤테이션 실행 중 발생한 에러 객체