useMutation

서버에서 데이터를 가져오는 것은 단순히 useQuery를 사용함으로 해결할 수 있지만,
서버의 데이터를 업데이트하는 경우, 즉 데이터의 생성/수정/삭제(CRUD) 시에는 useMutation를 사용하면 된다.

useMutation의 첫번째 인자, mutationFn

mutationFn은 useMutation의 첫번째 인자이며 필수 인자이다.
다음과 같은 방식으로 사용할 수 있다.

<방법 1>

const saveImageMutation = useMutation(mutationFn);

<방법 2>

const saveImageMutation = useMutation({
    mutationFn: mutationFn
})

mutationFn은 promise 처리가 이루어지는 함수이며 axios를 이용해 서버에 API를 요청하는 부분이다.

mutationFn 사용해보기

// API 호출하는 부분
const saveImage = async(formData: FormData) => {
	return (await Axios.post<ImageDto[]>('/api/product-images', formData)).data

// 호출한 API 상태를 관리
const saveImageMutation = useMutation((formData: FormData) => saveImage(formData), {});

useMutation의 트리거, mutate

mutate는 useMutation을 이용해 작성한 내용들이 실행될 수 있도록 도와주는 trigger역할을 한다.

• mutate와 mutateAsync
  useMutation은 mutate와 mutateAsync 함수를 제공한다. 이 둘의 차이를 알아보자.
  mutate는 아무것도 반환하지 않는 반면 mutateAsync는 돌연변이의 결과를 포함하는 Promise를 반환한다.
  또한,
  mutate는 콜백을 통해 데이터나 오류에 액세스할 수 있으며 오류 처리에 대해 걱정할 필요가 없지만, mutateAsync는 Promise를 제어할 수 있으므로 오류를 직접 처리해야한다는 차이가 있다.

mutate 사용해보기

mutate는 트리거 역할을 하기 때문에 useMutation을 정의해둔 뒤, 이벤트가 발생했을 때 mutate를 사용해주면 된다.

이미지를 업로드하면 서버를 거쳐 서버 url를 배열에 담아 반환하는 코드는 다음과 같다.

<방법 1. 구조분해 할당>

const { mutate, isLoading } = saveProductImageMutation
const [Images, setImages] = useState<any[]>([])

const saveImageFile = (e) =>. {
	const images = e.target.files
    
    const imageFormData = new FormData()
    
    mutate(imageFormData, {
            onSuccess: (data) => {
                setImages((prev) => [...prev, ...data.map(({ url }) => ({ image: url}))])
            },
        })

<방법 2. 직접 호출>

const [Images, setImages] = useState<any[]>([])

const saveImageFile = (e) =>. {
	const images = e.target.files
    
    const imageFormData = new FormData()
    
    saveProductImageMutation.mutate(imageFormData, {
            onSuccess: (data) => {
                setImages((prev) => [...prev, ...data.map(({ url }) => ({ image: url}))])
            },
        })

API 호출 함수 사용하기

<input type="file" accept={'image/*'} onChange={uploadFile} />