뮤테이션은 영어로 '형태나 구조상의 변화'라는 뜻을 가지고 있다.
여기서 뮤테이션이란, 사이드 이펙트를 가진 함수를 의미한다.

데이터베이스에 새로운 값을 추가하거나 수정, 삭제하는 행위는 사이드 이펙트에 해당한다.
그리고 이렇게 사이드 이펙트가 발생하는 경우에 우리는 useMutation()이라는 훅을 사용한다.

useMutation()은 useQuery()와 차이점이 하나 있다.
useQuery()의 쿼리 함수는 컴포넌트가 마운트되면서 자동으로 실행되지만, useMutation()은 실제로 뮤테이션하는 함수를 직접 실행해 줘야 한다.
mutate()함수를 통해 mutationFn으로 등록했던 함수를 실행할 수 있고, 그래야만 백엔드 데이터를 실제로 수정하게 된다.

참고로 mutate()를 하면 백엔드의 데이터는 변경이 되지만, 현재 캐시에 저장된 데이터는 refetch를 하지 않는 이상 기존의 데이터가 그대로 저장되어 있다.
따라서 refetch를 해줘야만 변경된 데이터를 화면에 제대로 반영할 수 있다.

useMutation()으로 데이터 추가하기

useMutation()을 이용해 포스트 업로드하는 기능을 만들어보자.

export async function uploadPost(newPost){
const response = await fetch(`${BASE_URL}/posts', {
 method: 'POST',
 headers:{
  'Content-Type': 'application/json',
  },
  body: JSON.stringify(newPost),
  });
  
  if(!response.ok){
   throw new Error('Failed to upload the post.');
   }
   
   return await response.json();
   }

그 후 다음과 같이 간단한 form을 만들어 새로운 포스트를 입력받을 수 있게 하겠다.

const [content, setContent] = useState('');

// ...

const handleInputChange = (e) => {
  setContent(e.target.value);
}

const handleSubmit = (e) => {
  e.preventDefault();
  const newPost = { username: 'codeit', content };
    // ...
};

return (
  <>
    <div>
      <form onSubmit={handleSubmit}>
        <textarea
          name='content'
          value={content}
          onChange={handleInputChange}
        />
        <button
          disabled={!content}
          type='submit'
        >
          업로드
        </button>
      </form>
    </div>
    <div>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            {post.user.name}: {post.content}
          </li>
        ))}
      </ul>
    </div>
  </>
);

마지막으로

const uploadPostMutation = useMutation({
  mutationFn: (newPost) => uploadPost(newPost),
});

const handleSubmit = (e) => {
  e.preventDefault();
  const newPost = { username: 'codeit', content };
  uploadPostMutation.mutate(newPost);
  setContent('');
};

업로드 버튼을 눌렀을 때 mutate()함수를 실행하도록 하면 된다.