알고는 가자 react-query version 5

React Query useMutation의 사용법에 대해 설명드리겠습니다. useMutation은 데이터를 생성, 수정, 삭제하는 비동기 작업을 처리하는 데 사용됩니다. 이는 React Query의 상태 관리와 비동기 로직을 간소화하고, 성공, 실패 및 진행 중 상태를 쉽게 관리할 수 있도록 돕습니다.

---

useMutation 사용법

1. 기본 사용 구조

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

const mutation = useMutation({
  mutationFn: async (data) => {
    // 비동기 작업 (API 호출 등)
    const response = await fetch('/api/resource', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' },
    });
    return response.json();
  },
  onSuccess: (data) => {
    // 성공 시 동작
    console.log('Mutation 성공:', data);
  },
  onError: (error) => {
    // 실패 시 동작
    console.error('Mutation 실패:', error);
  },
});

2. Mutation Trigger

• mutation.mutate()를 호출하여 비동기 작업을 실행합니다.
• mutation.mutateAsync()를 사용하면 Promise를 반환하여 추가적인 비동기 로직과 결합할 수 있습니다.

<button onClick={() => mutation.mutate({ id: 1, name: 'New Resource' })}>
  Trigger Mutation
</button>

---

React Query의 useMutation 주요 옵션

1. mutationFn

• 실제 비동기 작업을 정의합니다. 예: API 호출, 파일 업로드 등.
• mutationFn은 Promise를 반환해야 합니다.

mutationFn: async (data) => {
  return await fetch('/api/resource', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' },
  });
};

---

2. onSuccess

• Mutation이 성공했을 때 실행되는 콜백 함수입니다.
• 데이터를 다시 불러오거나 성공 알림을 표시하는 데 사용됩니다.

onSuccess: (data) => {
  console.log('Success:', data);
  queryClient.invalidateQueries(['resource']); // 특정 쿼리를 새로고침
};

---

3. onError

• Mutation이 실패했을 때 실행되는 콜백 함수입니다.
• 에러 알림을 표시하거나 로그를 기록하는 데 사용됩니다.

onError: (error) => {
  console.error('Error occurred:', error);
  alert('작업에 실패했습니다.');
};

---

4. onSettled

• Mutation이 성공하든 실패하든 작업이 끝난 후 실행됩니다.
• 성공/실패에 상관없이 공통 후속 작업을 수행할 때 사용합니다.

onSettled: () => {
  console.log('작업 완료');
};

---

React Query의 Mutation 상태

상태 값

• isPending: Mutation이 진행 중인지 나타냅니다.
• isSuccess: Mutation이 성공했는지 나타냅니다.
• isError: Mutation이 실패했는지 나타냅니다.
• error: 실패 시 반환된 에러 객체입니다.
• data: 성공 시 반환된 데이터입니다.

if (mutation.isPending) {
  return <p>작업 진행 중...</p>;
}

if (mutation.isError) {
  return <p>작업 실패: {mutation.error.message}</p>;
}

if (mutation.isSuccess) {
  return <p>작업 성공: {mutation.data}</p>;
}

---

useMutation의 실제 예제

댓글 수정 예제

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

const updateComment = async ({ id, content }: { id: number; content: string }) => {
  const response = await fetch(`/api/comments/${id}`, {
    method: 'PUT',
    body: JSON.stringify({ content }),
    headers: { 'Content-Type': 'application/json' },
  });

  if (!response.ok) {
    throw new Error('댓글 수정 실패');
  }

  return response.json();
};

const CommentEditor = ({ commentId, initialContent }: { commentId: number; initialContent: string }) => {
  const [content, setContent] = useState(initialContent);

  const mutation = useMutation({
    mutationFn: updateComment,
    onSuccess: () => {
      alert('댓글이 수정되었습니다!');
    },
    onError: (error) => {
      console.error(error);
      alert('댓글 수정 중 오류가 발생했습니다.');
    },
  });

  const handleSubmit = () => {
    mutation.mutate({ id: commentId, content });
  };

  return (
    <div>
      <textarea value={content} onChange={(e) => setContent(e.target.value)} />
      <button onClick={handleSubmit} disabled={mutation.isPending}>
        {mutation.isPending ? '수정 중...' : '수정 완료'}
      </button>
    </div>
  );
};

---

요약

1. useMutation 기본 구조:

   • mutationFn에 비동기 작업 정의.
   • onSuccess, onError, onSettled 콜백 함수로 결과 처리.

2. 상태 관리:

   • isPending, isError, isSuccess 상태를 활용해 UI와 비동기 작업을 연동.

3. 주요 장점:

   • 상태 관리 간소화.
   • 비동기 로직을 컴포넌트와 분리하여 유지보수성 향상.