React Query의 useMutation 구현 예시와 콜백 활용법

React Query는 서버 상태 관리를 간편하고 효율적으로 처리할 수 있는 훌륭한 도구입니다. 그 중에서도 useMutation 훅은 데이터를 업데이트, 삭제 또는 생성하는 비동기 작업을 처리하는 데 주로 사용됩니다.

 

이번 글에서는 useMutation을 사용하여 파일 업로드 기능을 구현하고 그 개념과 활용 방법을 살펴보겠습니다.

 

 

 

useMutation의 기본 개념

useMutation은 서버에 데이터를 전송하거나, 삭제, 업데이트하는 작업을 수행하며 작업의 성공, 실패, 진행 중 상태를 쉽게 관리할 수 있도록 도와줍니다.

const mutation = useMutation(mutationFn, {
  onSuccess: (data, variables, context) => {
    // 작업이 성공적으로 완료되었을 때 실행되는 콜백
  },
  onError: (error, variables, context) => {
    // 작업이 실패했을 때 실행되는 콜백
  },
  onSettled: (data, error, variables, context) => {
    // 작업이 성공 또는 실패했을 때 실행되는 콜백
  },
});

 

`onSuccess`, `onError`, `onSettled` 는 작업의 성공, 실패, 완료 시점에 대한 콜백 함수로 추가적인 작업을 쉽게 처리할 수 있습니다. 아래는 구현 예시입니다.

 

 

파일 업로드 기능 구현 예시

파일을 업로드할 수 있는 기능을 useMutation을 통해 구현했습니다. 이 코드는 서버에 파일 업로드 요청을 보내고, 성공 시 콜백을 통해 추가 작업을 수행합니다. 

const uploadImageMutation = useMutation({
  mutationFn: uploadFile,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ["images"] });
  },
});

• mutationFn:
  • 파일을 서버에 업로드하는 함수입니다. 여기서는 파일을 업로드하는 uploadFile 함수가 실행됩니다.
• onSuccess:
  • 파일 업로드 작업이 성공하면 추가 작업을 수행할 수 있습니다. 여기서는 이미지 파일을 최신 상태로 다시 불러오도록 캐시를 무효화하는 `queryClient.invalidateQueries({ queryKey: ["images"] })`를 호출했습니다.

• 로딩 상태 처리:
  • `useQuery` 와 마찬가지로 `uploadImageMutation.isPending` 을 통해 요청이 진행 중일 때는 로딩 스피너 등을 표시해줄 수 있습니다.

 

 

마무리

이처럼 React Query의 useMutation 훅은 서버와의 비동기 작업을 간편하고 효율적으로 관리할 수 있습니다. 특히, `onSuccess` 콜백을 통해 캐시를 무효화하여 최신 상태로 유지하는데 매우 유용합니다.