[TIL033] 리액트 쿼리 React Query

20240612 33일차

---

리액트 쿼리 (React Query)

리액트 쿼리(React Query)는 데이터 페칭, 캐싱, 동기화 및 서버 상태 관리에 필요한 기능을 제공하는 라이브러리이다.
간단하게 API에서 데이터를 가져오는 역할과 데이터를 생성, 수정, 삭제하는 역할을 한다..!!

리액트 쿼리 설치

npm install react-query

yarn add react-query

useQuery

useQuery 훅은 데이터를 가져오는 역할을 한다.
가져온 데이터를 캐싱하며 성공, 실패, 로딩 상태로 페칭 상태를 관리할 수 있다!

import 방법

import { useQuery } from 'react-query';
import axios from 'axios';

현재 하고 있는 프로젝트에서는 Axios와 리액트 쿼리가 같이 사용됐다.
먼저 axios와 useQuery를 위와 같이 import 해준다.

  const { data, isLoading, error  } = useQuery('fetchData', () =>
    axios.get('/api/data').then(res => res.data)
  ); // fetchData는 쿼리 키이며 내가 임의로 지을 수 있다.
// 데이터 페칭 상태를 관리할 수 있다.

 if (isLoading) return <div>Loading...</div>;
// isLoading을 추가함으로써 item의 값이 로드 중으로 undefined일 때, 
// isLoading은 true가 됨으로써 return하기 때문에 에러를 방지할 수 있다.


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

위의 코드는 useQuery의 간단한 사용 예시이다.
위처럼 isLoading으로 item 값을 로드 중일 때 에러를 쉽게 방지할 수 있다!

useMutation

useMutation 훅은 리액트 쿼리에서 데이터를 추가, 수정, 삭제할 때 사용된다.
단어 뜻 그대로 가져온 데이터를 변이시키는 훅이라고 생각하면 된다!!
비동기 작업을 처리하고, 관리한다!

이 훅은 아래와 같은 세가지 상황에서 사용된다

• 서버에 새로운 데이터를 추가할 때 (POST 요청)
• 서버의 데이터를 수정할 때 (PUT 또는 PATCH 요청)
• 서버의 데이터를 삭제할 때 (DELETE 요청)

import 방법

import { useMutation, useQueryClient } from 'react-query';
import axios from 'axios';

import React from 'react';
import { useMutation, useQueryClient } from 'react-query';
import axios from 'axios';

function MyComponent() {
  const queryClient = useQueryClient();

  // 추가, 수정, 삭제할 함수를 정의
  const mutation = useMutation(newData => axios.post('/api/data', newData), {
    onSuccess: () => {
      // 성공하면 'fetchData' 쿼리를 무효화하여 데이터를 새로 가져온다.
      queryClient.invalidateQueries('fetchData');
    },
    onError: (error) => {
      console.error('Error occurred:', error);
    },
  });

  return (
    <div>
      <button
        onClick={() => {
          mutation.mutate({ id: 1, name: 'New Data' });
        }} // 버튼을 누르면 mutation을 mutate한다. .mutate는 실행하는 함수다. 해당 객체가 인자로 전달된다.
      >
        Add Data
      </button>
  );
}

위는 예시 코드이다!