[React] useMutation 알아보기_(React Query, TanStack Query)

우리가 React 애플리케이션을 개발할 때 서버와의 데이터 상호작용은 필수적이며, 이 때 데이터 조회뿐만 아니라 생성, 수정, 삭제 작업도 진행하게 된다.

이러한 작업을 쉽게 할 수 있도록 하는 게 TanStack Query의 useMutation hook이다.

 

useMutation에 대해 깊이있게 알아봄으로써 제대로 활용할 수 있도록 해보자!

 

---

1. TanStack Query란?

useMutation을 알아보기 전에 useMutation을 제공하는 TanStack Query에 대해 간단히 알아보자.

TanStack Query는 원래 React 전용 데이터 페칭 및 상태 관리 라이브러리이기 때문에 React Query라는 명칭이었지만

React뿐만 아니라 Vue, Svelte, Solid 등과 같은 다양한 프레임워크를 지원하기 위해 확장하며 TanStack Query로 이름을 바꾸게 되었다.

 

TanStack Query는 서버 상태 관리를 간편하게 해주는 라이브러리로, 데이터 페칭, 캐싱, 동기화, 백그라운드 데이터 갱신 등 다양한 기능을 제공한다.

특히 비동기 작업을 쉽게 처리할 수 있도록 돕기 때문에 개발 생산성을 크게 향상시킨다고 한다.

 

2. useMutation이란?

useMutation은 주로 데이터 변이를 위한 API 호출을 간편하게 할 수 있도록 도와주며 이를 통해 데이터 생성, 수정, 삭제 등의 작업을 쉽게 처리할 수 있다.

예를 들어 회원가입, 게시물 수정, 댓글 삭제 등의 작업을 수행할 수 있다.

 

여기서 mutate란 사전적으로 변화시키다, 돌연변이라는 뜻을 가진다.
말 그대로 데이터를 변화시킨다고 이해하면 좋다!

 

3.  기본 사용방법

기본 사용방법을 알아보기 위해 회원가입 과정을 기준으로 이해해보자.

 

우선 axiosInstance를 사용하여 서버에 새로운 사용자를 생성하는 함수를 정의한다.

const postSignup = async({email, password}: RequestUser): Promise<void> => {
  const {data} = await axiosInstance.post('/auth/signup', {
    email,
    password
  });

  return data;
};

 

그 다음 useMutation hook을 사용하여 postSignup 함수를 호출하고

이 함수를 signupMutation으로 export한다.

const useSignup = (mutationOptions?: UseMutationCustomOptions) => {
  return useMutation({
    mutationFn: postSignup,
    ...mutationOptions,
  });
};

const signupMutation = useSignup();

 

그럼 실제 사용하게 될 화면에서는 버튼을 눌렀을 때 입력되었던 사용자의 email과 password 정보를 인자로 signupMutation,

즉 /auth/signup으로 데이터를 전달하는 postSignup을 호출하는 useSignup을 실행한다.

const {signupMutation, loginMutation} = useAuth();

  const handleSubmit = () => {
    const {email, password} = signup.values;
    signupMutation.mutate({email, password});
  }
  
return (
    <button
      onClick={handleSubmit}
    >
      회원가입
    </button>
  );

 

4. 옵션

useMutation에서 제공하는 옵션을 활용해 더 세밀한 작업 제어가 가능하다.

(1) onSuccess

변이 작업이 성공적으로 완료되었을 때 실행되는 콜백 함수이다.

 

(2) onError

변이 작업이 실패했을 때 실행되는 콜백 함수이다.

 

(3) onSettled

변이 작업의 성공 여부에 관계없이 작업이 완료되었을 때 실행되는 콜백 함수이다.

 

위 예제의 handleSubmit의 mutate 부분에 옵션을 아래와 같이 적용할 수 있다.

변이 작업이 성공했을 경우, loginMutation을 실행함으로써 회원가입한 사용자의 정보로 자동 로그인을 시켜주고

변이 작업이 실패한 경우, 에러 메세지를 사용자에게 보여주는 것이다.

const handleSubmit = () => {
    const {email, password} = signup.values;
    signupMutation.mutate({email, password}, {
      onSuccess: () => loginMutation.mutate({email, password}),
      onError: error => 
        Toast.show({
          type: 'error',
          text1: error.response?.data.message || errorMessages.UNEXPECT_ERROR,
          position: 'bottom',
          visibilityTime: 2000,
        })
    });
  }

 

---

 

이번 포스트를 작성해보며 useMutation hook의 기본 사용방법에 대해 알아보았다.

앞으로 이를 기반으로 실제 프로젝트에 적용하여 보다 효율적으로 서버 상태 관리를 시도해봐야겠다.