[React Native] useMutation 이용해서 수정/삭제 기능 구현하기

useMutation이란?

• React-Query의 hook 중 하나로 DB에 추가/수정/삭제 발생시킬 때 사용하는 hook이다.
• database에 직접 접근해서 data를 변경시킬 수 있다.
• mutation key, mutation 함수, 옵션 객체를 인자로 받는다.

 

 

 

 

 

 

적용 방법

const { isLoading: isLoadingEditing, mutate: reviseReview } = useMutation(
    ["editReview", review.id],
    (body) => editReview(body),
    {
      onSuccess: () => {
        console.log("수정성공");
      },
      onError: (err) => {
        console.log("err in edit:", err);
      },
    }
  );

 

 

 

 

 

 

적용 예시 (movie-review 앱에서 적용한 방법)

// ReviewEdit.jsx
import { useMutation } from "react-query";

...

 const { isLoading: isLoadingDeleting, mutate: removeReview } = useMutation(
    ["deleteReview", review.id],
    (body) => deleteReveiw(body),
    {
      onSuccess: () => {
        console.log("삭제 성공");
      },
      onError: (error) => {
        console.log("error in delete: ", error);
      },
    }
  );

  const { isLoading: isLoadingEditing, mutate: reviseReview } = useMutation(
    ["editReview", review.id],
    (body) => EditReview(body),
    {
      onSuccess: () => {
        console.log("수정 성공");
      },
      onError: (error) => {
        console.log("error in edit: ", error);
      },
    }
  );
  
  ...

 

 

 

 

---

더 자세한 내용은 공식 문서에.

https://tanstack.com/query/v4/docs/react/reference/useMutation

useMutation | TanStack Query Docs