리액트 쿼리로 데이터를 가져오는 것 뿐만 아니라 데이터를 전송하고 수집하는 것 또한 가능하다.
하지만 useQuery는 데이터를 가져올 때만 사용하고, 데이터를 전송하고 POST 요청을 전송하려면 useMutation을 사용한다.

POST 요청을 전송할 때 요청 전송을 위한 로직을 직접 작성해서 useQuery를 사용할 수도 있지만, useMutation 훅은 데이터를 변경하는 쿼리에 최적화 되어있기 때문에 편리하다.

예를 들어, 컴포넌트가 렌더링 될 때 useQuery와 달리 요청이 즉시 전송되지 않도록 할 수 있다. 즉, 필요할 때만 요청이 전송되도록 제어할 수 있다.

---

useMutation

서버에 데이터를 전송하거나 상태를 변경하는 비동기 작업(POST, PUT, DELETE)을 처리할 때 사용하는 훅

useMutation은 데이터를 가져오는 대신 서버에 변경을 요청하고, 그 요청의 상태(성공, 실패, 로딩)를 관리한다.

useQuery와 마찬가지로 mutationKey를 설정할 수 있지만 변형은 응답 데이터를 캐시 처리하지 않기 때문에 반드시 필요한 것은 아니다.

mutationFn

서버에 요청을 전송하는 함수

mutationFn은 서버에 전송할 로직을 포함하며, 주로 API 호출을 정의한다.
예를 들어, axios 또는 fetch를 사용하여 POST 요청을 정의할 수 있다.

const mutation = useMutation(mutationFn);

function mutationFn(newData) {
  return axios.post('/api/data', newData);
}

mutationFn은 인자로 데이터를 받을 수 있어, 전송 시 필요한 데이터를 전달할 수 있다.

mutate 프로퍼티

mutation을 트리거하는 함수

mutate는 컴포넌트 어디서든 호출할 수 있는 함수로, 이를 통해 요청을 전송한다.
이 함수는 mutationFn에 정의된 로직을 실행하며, 성공 또는 실패 시 실행할 콜백을 옵션으로 전달할 수도 있다.

const mutation = useMutation(mutationFn, {
  onSuccess: (data) => {
    console.log('요청 성공:', data);
  },
  onError: (error) => {
    console.error('요청 실패:', error);
  },
});

function handleSubmit(newData) {
  mutation.mutate(newData, {
    onSuccess: () => {
      console.log('추가적인 성공 처리');
    },
    onError: () => {
      console.error('추가적인 실패 처리');
    },
  });
}

mutate는 요청을 전송하고 성공/실패 상태를 업데이트하며, 상황에 따라 별도의 성공 및 에러 처리를 실행할 수 있도록 한다.

---

이런 방식으로 useMutation을 활용하면 데이터 전송 및 상태 관리가 더 직관적으로 가능해진다.