react Query의 useMutation을 활용하여 데이터 변경하기

리액트 쿼리는  HTTP 요청을 처리하고 프론트엔드 사용자 인터페이스를 백엔드 데이터와 동기화된 상태로 유지하기 위해 다양한 기능을 제공하고 있다. 그중 대표적인 기능이 데이터를 동기화된 상태로 가져오는 것이었다. 그런데 리액트 쿼리로 데이터 가져오기만 가능한 건 아니다.

이벤트 생성과 같이 리액트 이벤트를 전송하는 것도 가능하다. 즉 사용자가 form에 입력한 데이터를 수집해서 백엔드로 전송하는 기능을 할 수 있다는 이야기이다. 그러한 기능 수행에 도움을 주는 쿼리가 바로 useMutation이다.

useQuery가 데이터를 가져오는 데 중점을 두는 반면, useMutation은 데이터를 변경하고 백엔드로 데이터를 전송하는 데 중점을 둔다.

useMutation 사용 방법

React Query 설치 (이미 설치되어 있지 않다면):

npm install @tanstack/react-query

이번 포스팅에서는 tanstack react-query를 사용한다.

필요한 모듈 import:

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

 

Mutation 함수 정의: 백엔드 API로 HTTP 요청을 보내는 함수를 정의한다. 작성한 함수는 useMutation에 의해 호출된다.

const subscribeToNewsletter = async (email) => {
  const response = await fetch('/api/newsletter/subscribe', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ email }),
  });

  if (!response.ok) {
    throw new Error('구독 처리 중 문제가 발생했습니다.');
  }

  return await response.json();
};

위에서 작성한 subscribeToNewLetter 함수는 email을 매개변수로 받아서 해당 이메일 주소를 백엔드 API로 보내고, API의 응답을 처리한다. 성공적으로 처리되었다면, JSON 형식의 응답 데이터를 반환한다.

useMutation 훅 사용: 위에서 정의한 subscribeToNewsletter 함수를 useMutation 훅에 전달하여 사용한다.

const { mutate, isLoading, isError, isSuccess } = useMutation(subscribeToNewsletter);

• mutate: 실제로 mutation을 실행하는 함수. 폼 제출 등 이벤트 핸들러에서 호출.
• isLoading: mutation 요청이 진행 중인지 여부를 나타내는 상태.
• isError: mutation 요청에서 오류가 발생했는지 여부를 나타내는 상태
• isSuccess: mutation 요청이 성공적으로 완료되었는지 여부를 나타내는 상태.

 

폼 제출 핸들러에서 mutate 호출: 사용자가 이메일을 입력하고 구독 폼을 제출할 때 mutate 함수를 호출하여 mutation을 실행한다.

 

const handleFormSubmit = (event) => { event.preventDefault(); const formData = new FormData(event.target); const email = formData.get('email'); mutate(email); };

이제 사용자가 폼을 제출하면 mutate 함수가 호출되어 이메일 주소를 백엔드로 전송하고, 그에 따른 상태 변화를 isLoading, isError, isSuccess 상태를 통해 관리할 수 있다.