React Query useMutation 사용법

React Query는 React 앱에서 데이터를 fetch하고 캐시하는 것을 간단하게 만들어주는 라이브러리입니다. useMutation은 React Query에서 제공하는 함수 중 하나로, 데이터를 create, update, delete하는데 사용됩니다.

useMutation 사용법

useMutation 함수는 두 개의 인자를 받습니다. 첫 번째 인자는 mutation 함수이고, 두 번째 인자는 옵션 객체입니다.

mutation 함수

mutation 함수는 비동기로 데이터를 create, update, delete하는 함수입니다. mutation 함수는 async/await를 사용하여 구현합니다.

const createTodo = async (newTodo) => {
  const response = await fetch("/api/todos", {
    method: "POST",
    body: JSON.stringify(newTodo),
    headers: {
      "Content-Type": "application/json",
    },
  });
  return response.json();
};

옵션 객체

옵션 객체는 다음과 같은 속성을 가질 수 있습니다.

• mutationKey: mutation을 식별할 수 있는 고유한 값입니다. mutation 함수 이름과 같은 값으로 설정하는 것이 좋습니다.
• onSuccess: mutation 함수 실행이 성공적으로 완료되었을 때 실행되는 함수입니다.
• onError: mutation 함수 실행이 실패했을 때 실행되는 함수입니다.

const options = {
  mutationKey: "createTodo",
  onSuccess: (data) => {
    console.log("Todo created successfully!", data);
  },
  onError: (error) => {
    console.error("Error creating todo!", error);
  },
};

useMutation Hook

useMutation Hook은 mutation 함수와 옵션 객체를 인자로 받습니다. 반환값은 배열로, 첫 번째 요소는 mutate 함수이고, 두 번째 요소는 mutation 상태 정보가 담긴 객체입니다.