[React] useMutation() 은 a single variable or object 만 넣을 수 있다

게시글 작성 페이지를 구현하면서 useMutation 을 사용하고 있습니다.
그런데 오늘 parameter 두 개 받는 api 를 useMutation 을 사용하여 호출하려고 하는데 
도통 안되는 거예요
useMutaion은 object 형태 또는 하나의 변수를 전달해야 하는 것 을 모른 채 타입이 안 맞나? 코드가 문제있나? 하면서 
하루종일 저를 의심했어요.... 물론 내 잘못 맞음
난 폭풍 구글링 했는데 왜 몰랐는가 반성하며 useMutation 에 대해 공부하다가 자겠습니다!!

 

✔ 개념

useMutation() 은 react query를 이용해서 서버에 데이터 변경 작업을 요청할 때 사용합니다.  

데이터 조회는 useQuery() 를 사용합니다.

useQuery의 경우 기본적으로 컴포넌트가 렌더링 될 때 실행이 되지만, useMutation의 경우 렌더링 시점이 아닌, 원하는 액션이 발생했을 때 실행하도록 되어있습니다.

✔ 사용 방법

useMutation 의 기본적인 문법

import { useMutation } from "react-query"

const { mutate } = useMutation(mutationFn, {options});

mutationFn : 패치 함수

 

function App() {
   const mutation = useMutation(newTodo => {
     return axios.post('/todos', newTodo)
   })
 
   return (
     <div>
       {mutation.isLoading ? (
         'Adding todo...'
       ) : (
         <>
           {mutation.isError ? (
             <div>An error occurred: {mutation.error.message}</div>
           ) : null}
 
           {mutation.isSuccess ? <div>Todo added!</div> : null}
 
           <button
             onClick={() => {
               mutation.mutate({ id: new Date(), title: 'Do Laundry' })
             }}
           >
             Create Todo
           </button>
         </>
       )}
     </div>
   )
 }

In the example above, you also saw that you can pass variables to your mutations function by calling the mutate function with a single variable or object.

 

알고 나니 보이는 공식 문서의 설명

하나의 변수 또는 object 와 함께 mutate function을 호출하여,,,

공식 문서를 잘 보자.

 

✔ 참고

https://react-query-v3.tanstack.com/guides/mutations

Mutations | TanStack Query Docs

https://abangpa1ace.tistory.com/266

[React Query] (4) useMutation()

https://maxkim-j.github.io/posts/react-query-preview

React-Query 살펴보기