React useMutation

1. useMutation

React Query 라이브러리에서 제공하는 훅으로, 서버에 데이터를 생성, 수정, 삭제하는 비동기 작업을 간단하고 효과적으로 처리할 수 있도록 도와준다. 주로 POST, PUT, DELETE 요청과 같은 작업에 사용되며, React 상태 관리와 결합하여 데이터 갱신 및 UI 업데이트를 효율적으로 처리한다.

 

1-1. 주요 특징

• 비동기 데이터 조작: 데이터를 서버에 전송하거나 수정하는 작업을 처리한다.
• 상태 관리
  • isLoading: 요청이 진행중인지 나타냄
  • isError: 요청이 실패했는지 나타냄
  • isSuccess: 요청이 성공했는지 나타냄
• 옵션을 통한 제어
  • 성공 또는 실패 시 호출되는 콜백 함수를 설정할 수 있음(onSuccess, onError 등)
• 자동 리패치
  • 데이터 변경 후 React Query의 useQuery 캐시를 리패치하여 UI를 갱신할 수 있음

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

function MyComponent() {
  // 서버에 데이터 전송 함수 정의
  const createUser = async (newUser) => {
    return await axios.post('/api/users', newUser);
  };

  // useMutation 설정
  const mutation = useMutation(createUser, {
    onSuccess: (data) => {
      console.log('성공:', data);
      // 캐시 무효화 등 추가 작업
    },
    onError: (error) => {
      console.error('오류 발생:', error);
    },
  });

  const handleCreateUser = () => {
    // Mutation 실행
    mutation.mutate({ name: 'John Doe', email: 'john@example.com' });
  };

  return (
    <div>
      <button onClick={handleCreateUser} disabled={mutation.isLoading}>
        {mutation.isLoading ? '생성 중...' : '사용자 생성'}
      </button>
      {mutation.isError && <p>오류가 발생했습니다.</p>}
      {mutation.isSuccess && <p>사용자 생성 성공!</p>}
    </div>
  );
}

 

 

2. useMutation 반환값

useMutation은 다음과 같은 객체를 반환하여, 이를 통해 비동기 작업의 상태를 관리할 수 있다.

 

2-1. 상태 관련 값

• isLoading: 요청이 진행 중인지 여부
• isError: 요청 실패 여부
• isSuccess: 요청 성공 여부
• data: 요청 성공 시 서버에서 반환된 데이터
• error: 요청 실패 시 발생한 오류 정보

2-2. 메서드

• mutate(variables): mutation 요청을 실행
• mutateAsync(variables): Promise를 반환하는 비동기 메서드
• reset(): mutation 상태를 초기화

 

3. 옵션

useMutation은 두 번째 인수로 옵션 객체를 받을 수 있으며, 다음과 같은 옵션을 사용한다.

 

1. onSuccess: 요청 성공 시 호출되는 콜백 함수

2. onError: 요청 실패 시 호출되는 콜백 함수

3. onSettled: 성공 또는 실패 여부와 상관없이 호출되는 콜백 함수

4. retry: 요청 실패 시 재시도 횟수 설정

const mutation = useMutation(createUser, {
  onSuccess: () => {
    console.log('요청 성공!');
  },
  onError: (error) => {
    console.error('요청 실패:', error);
  },
  retry: 3, // 실패 시 최대 3번 재시도
});

 

예제. 캐시와 결합

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

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

  const mutation = useMutation(createUser, {
    onSuccess: () => {
      queryClient.invalidateQueries('users'); // 'users' 쿼리를 리페치
    },
  });

  return <button onClick={() => mutation.mutate(newUser)}>사용자 생성</button>;
}