React Query의 useMutation 훅을 활용한 데이터 업데이트

by

React Query는 데이터를 관리하고 가져오는 데 탁월한 도구로, useMutation 훅을 사용하여 데이터를 업데이트하고 상태를 효과적으로 관리할 수 있습니다. 이 블로그 포스팅에서는 useMutation 훅의 사용법과 예제를 통해 데이터 업데이트를 살펴보겠습니다.


useMutation 훅 기초

useMutation 훅을 사용하려면 먼저 React Query 라이브러리를 임포트해야 합니다. 그리고 다음과 같이 useMutation 훅을 활용하여 데이터 업데이트 함수를 생성합니다.

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

function UpdateTodo() {
  // useMutation 훅을 사용하여 업데이트 함수와 옵션을 설정합니다.
  const mutation = useMutation((newTodo) => updateTodoOnServer(newTodo));

  // 업데이트 함수를 호출하는 핸들러 함수
  const handleUpdateTodo = (newTodo) => {
    mutation.mutate(newTodo);
  };

  return (
    <div>
      <h1>Todo 업데이트</h1>
      <button onClick={() => handleUpdateTodo({ id: 1, text: '업데이트된 Todo' })}>
        Todo 업데이트
      </button>
      {mutation.isError ? (
        <p>오류: {mutation.error.message}</p>
      ) : mutation.isSuccess ? (
        <p>Todo가 성공적으로 업데이트되었습니다!</p>
      ) : null}
    </div>
  );
}

export default UpdateTodo;

위 코드에서 useMutation 훅을 사용하여 updateTodoOnServer 함수를 호출하는 업데이트 함수를 생성했습니다. 이 함수는 서버에서 새로운 Todo를 업데이트하는 비동기 함수를 호출합니다.



useMutation 옵션

useMutation 훅은 다양한 옵션을 설정할 수 있습니다. 몇 가지 주요 옵션은 다음과 같습니다.

  • onMutate: 뮤테이션을 시작하기 전에 실행할 함수를 정의합니다.
  • onSuccess: 뮤테이션이 성공적으로 완료된 후 실행할 함수를 정의합니다.
  • onError: 뮤테이션이 실패한 경우 실행할 함수를 정의합니다.
  • onSettled: 뮤테이션이 완료(성공 또는 실패)된 후 실행할 함수를 정의합니다.
  • throwOnError: true로 설정하면 뮤테이션 실패 시 예외를 throw합니다.
  • retry: 뮤테이션을 재시도할 횟수나 조건을 정의합니다.


useMutation 상태 속성

useMutation 훅은 다음과 같은 상태 속성을 반환합니다.

  • mutate: 업데이트 함수를 호출할 수 있는 함수입니다.
  • isLoading: 뮤테이션이 진행 중인지 여부를 나타내는 부울 값입니다.
  • isSuccess: 뮤테이션이 성공적으로 완료되었는지 여부를 나타내는 부울 값입니다.
  • isError: 뮤테이션이 실패했는지 여부를 나타내는 부울 값입니다.
  • data: 뮤테이션 결과로 반환된 데이터를 포함합니다.
  • error: 뮤테이션 실패 시 발생한 오류를 포함합니다.


마무리

useMutation 훅을 사용하면 React Query를 활용하여 데이터를 업데이트하고 상태를 효과적으로 관리할 수 있습니다. 이를 통해 데이터 업데이트 작업을 보다 효과적으로 처리할 수 있으며, 실패 시 오류 처리 및 재시도 로직을 쉽게 구현할 수 있습니다. React Query의 useMutation 훅을 활용하여 데이터 업데이트를 보다 간편하게 처리해보세요.




Leave a Comment