React Query Mutate 기능 사용법

React Query에서 mutate 기능을 사용하면 서버에 데이터를 생성, 업데이트, 삭제 등의 동작을 수행할 수 있습니다. 아래는 mutate 기능을 사용하는 기본적인 방법과 예제를 설명합니다.

1. React Query의 useMutation 훅 사용

useMutation은 서버에 대한 상태 변경 작업(POST, PUT, DELETE 등)을 처리하는 데 사용됩니다.

2. 기본 코드 구조

javascript
코드 복사
import { useMutation, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';

function MyComponent() {
  const queryClient = useQueryClient();

  // Mutation 생성
  const mutation = useMutation(
    // 서버 요청 함수 정의
    async (newData) => {
      return await axios.post('/api/data', newData);
    },
    {
      // 요청 성공 시 호출되는 콜백
      onSuccess: () => {
        // 캐시된 데이터를 무효화하여 최신 데이터로 갱신
        queryClient.invalidateQueries(['data']);
      },
      // 요청 실패 시 호출되는 콜백
      onError: (error) => {
        console.error('Mutation failed:', error);
      },
    }
  );

  // 이벤트 핸들러
  const handleSubmit = async () => {
    try {
      await mutation.mutate({ key: 'value' });
      console.log('Data successfully mutated');
    } catch (error) {
      console.error('Mutation error:', error);
    }
  };

  return (
    <div>
      <button onClick={handleSubmit}>Mutate Data</button>
    </div>
  );
}

export default MyComponent;

3. 주요 개념

1. useMutation의 첫 번째 인수:

   • 데이터를 변경하는 API 호출 함수입니다. 위 예제에서는 axios.post를 사용했습니다.

2. 옵션 (선택 사항):

   • onSuccess: 요청 성공 시 실행됩니다.
   • onError: 요청 실패 시 실행됩니다.
   • onMutate: 요청 전 실행됩니다. 낙관적 업데이트(optimistic update)를 구현할 때 유용합니다.

3. queryClient.invalidateQueries:

   • 데이터를 갱신하기 위해 기존 캐시를 무효화합니다. 예를 들어, ['data'] 키에 해당하는 데이터를 새로 불러오도록 설정합니다.

4. 실전 예제: 낙관적 업데이트

사용자가 데이터를 변경했을 때, 서버 응답을 기다리지 않고 UI를 즉시 업데이트하는 방법입니다.

javascript
코드 복사
const mutation = useMutation(
  async (newData) => {
    return await axios.post('/api/data', newData);
  },
  {
    onMutate: async (newData) => {
      // 요청 전에 기존 데이터 가져오기
      const previousData = queryClient.getQueryData(['data']);
      
      // 낙관적 업데이트
      queryClient.setQueryData(['data'], (old) => [...old, newData]);

      // rollback을 위해 기존 데이터를 반환
      return { previousData };
    },
    onError: (error, newData, context) => {
      // 에러 발생 시 rollback
      queryClient.setQueryData(['data'], context.previousData);
    },
    onSettled: () => {
      // 성공 또는 실패 후 데이터 갱신
      queryClient.invalidateQueries(['data']);
    },
  }
);

5. 추가 팁

• **mutation.isLoading, mutation.isSuccess, mutation.isError**와 같은 상태를 사용해 요청 상태를 UI에 반영할 수 있습니다.
• TypeScript와 함께 사용한다면 useMutation의 제네릭을 통해 타입을 지정하는 것이 좋습니다.

궁금한 점이나 추가 기능이 필요하면 말씀해주세요! 😊