[React-query] 데이터통신을 위한 useMutation 개념과 hooks 사용법

 

 

🤷‍♂️ 본론에 앞서

---

react-query는 React에서 많이 사용되는 라이브러리이며 다양한 훅과 유틸리티를 제공해 주며 개발자의 편리성과 생산성을 높여줍니다.

본론에 앞서 아래의 글들을 읽고 오시는 것을 추천드립니다.

useMutation대한 글을 이해하는데 많은 도움이 됩니다.

 

 

react-query 사용법에 대해 알아보기

https://cometruedream.tistory.com/130

React-query 상태 관리

 

 

react-query 데이터 프리페칭 사용법에 대해 알아보기

https://cometruedream.tistory.com/251

[React-query] 데이터 프리페칭 사용법 정리

 

 

refetch 옵션과 사용법 총 정리

https://cometruedream.tistory.com/252

[React-query] refetch 옵션과 사용법 총 정리

 

🤷‍♂️ useMutation 개념?

---

useMutation은 React Query에서 제공하는 훅으로 서버와 데이터를 변경하는 작업(HTTP 메서드: POST, PUT, PATCH, DELETE)을 처리할 때 사용됩니다.

useMutation은 서버 상태와 클라이언트 상태를 동기화하는데 매우 효율적이며, 유용한 기능을 제공합니다.

useMutation 유요한 기능들을 활용해서 데이터의 상태관리를 보다 효율적으로 할수 있습니다.

 

리액트 인기 있는 이유?

프런트개발자가 리액트를 좋아하는 8가지 이유에 대해 보시는 것을 추천드립니다.

https://fnfentermagazine.com/%ed%94%84%eb%a1%a0%ed%8a%b8%ea%b0%9c%eb%b0%9c%ec%9e%90%ea%b0%80-%eb%a6%ac%ec%95%a1%ed%8a%b8%eb%a5%bc-%ec%a2%8b%ec%95%84%ed%95%98%eb%8a%94-8%ea%b0%80%ec%a7%80-%ec%9d%b4%ec%9c%a0/

프론트개발자가 리액트를 좋아하는 8가지 이유

 

 

300x250

 

🤷‍♂️ useMutation 사용법?

---

Mutation의 기본 사용법

 

1. useMutation 훅은 서버에 데이터를 변경하는 비동기 함수와 함께 사용됩니다.
2. 예제

import { useMutation } from 'react-query';
import axios from 'axios';

const createPost = async (newPost) => {
  const response = await axios.post('/posts', newPost);
  return response.data;
};

const MyComponent = () => {
  const { mutate }  = useMutation(createPost);

  const handleCreatePost = () => {
     mutate({ title: 'New Post', content: 'Hello World' });
  };

  return (
    <div>
      <button onClick={handleCreatePost}>Create Post</button>
      {mutation.isLoading && <p>Creating post...</p>}
      {mutation.isError && <p>Error creating post</p>}
      {mutation.isSuccess && <p>Post created successfully!</p>}
    </div>
  );
};

 

위에 예제처럼 가장 기본적인 useMutation 사용법이며 HTTP 메서드 POST 요청을 처리할 때 사용됩니다.

 

useMutation 훅의 가장 중요한 4가지의 콜백 옵션

1. useMutation 훅은 ‘onSuccess’, ‘onError’, ‘onSettled’와 같은 다양한 콜백 옵션을 제공합니다.
2. 예제

const mutation = useMutation(createPost, {
  onSuccess: (data) => {
    console.log('서버와 성공적으로 완료:', data);
  },
  onError: (error) => {
    console.error('서버와 통신 오류:', error);
  },
  onSettled: () => {
    console.log('서버와 통신이 실패하든 안하든 호출');
  },
});

 

위에 예제처럼 useMutation 훅의 4가지 사용방법입니다.

 

 

 

onMutate, onSuccess, onError, onSettled 옵션 알아보기

 

1. onMutate
   1. useMutation 훅이 서버에 데이터를 보내기 직전에 호출됩니다.
   2. 서버에 데이터를 보내기 전에 처리해야 되는 로직을 onMutate에서 처리합니다. 예: 서버와 통신직전 로딩 상태를 표시할때 많이 사용됩니다.
2. onSuccess
   1. 서버와 요청이 성공적으로 완료되고 서버가 응답값을 돌려줬을 때 호출됩니다.
   2. 서버와 요청이 성공하고 처리해야되는 로직을 onSuccess에서 처리합니다. 예: 성공 메시지, 다른 화면으로 이동시킬 때 사용됩니다.
3. onError
   1. 서버와 요청이 실패했을 때 호출됩니다.
   2. 요청이 실패했을 때 처리해야 되는 로직을 onError에서 처리합니다. 예: 서버와 통신 실패 시 에러메시지, 사용자에 가이드를 요청할 수 있습니다.
4. onSettled
   1. 서버와 요청이 끝난 후 성공하든 실패하든 항상 호출됩니다. 필요 없는 경우에는 호출을 안 해도 됩니다.
   2. 요청이 끝나고 항상 처리해야 되는 로직을 onSettled에서 처리합니다. 예: 서버와 통신이 완료 후 로딩바를 해체하는 데 사용됩니다.

 

위에 4가지 옵션을 이해할 수 있는 예시

import { useMutation } from '@tanstack/react-query';

const sendText = async (message) => {
  // 서버에 메시지를 보내는 함수
};

const useSendText = () => {
  const { mutate: send } = useMutation({
    mutationFn: sendText,
    onMutate: () => {
      // 메시지를 보내기 직전에 호출
      console.log('문자를 보내는 중...');
    },
    onSuccess: () => {
      // 메시지를 성공적으로 보낸 후 호출
      console.log('문자를 성공적으로 보냈어요!');
    },
    onError: (error) => {
      // 메시지를 보내는 중 오류가 발생하면 호출
      console.log('문자 보내기에 실패했어요. 다시 시도해 주세요.');
    },
    onSettled: () => {
      // 메시지 보내기가 끝나면 항상 호출 (성공이든 실패든)
      console.log('문자 보내기 작업이 끝났어요.');
    },
  });

  return send;
};

 

useMutation 실제 예제

import { useMutation, useQueryClient } from 'react-query';
import axios from 'axios';

const deletePost = async (postId) => {
  await axios.delete(`/posts/${postId}`);
};

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

  const { mutate: send } = useMutation(deletePost, {
    onSuccess: () => {
      queryClient.invalidateQueries('posts');
    },
  });

  const handleDelete = (postId) => {
    send(postId);
  };

  return (
    <div>
      <button onClick={() => handleDelete(1)}>Delete Post</button>
      {mutation.isLoading && <p>Deleting post...</p>}
      {mutation.isError && <p>Error deleting post</p>}
      {mutation.isSuccess && <p>Post deleted successfully!</p>}
    </div>
  );
};

 

위에 예제처럼 실제 많이 사용되는 useMutation 로직입니다.

서버와 데이터를 성공적으로 통신 후 onSuccess 호출하고 변경한 데이터를 업데이트하는 react-query 제공하는 invalidateQueries 메서드를 실행했습니다.

 

queryClient.invalidateQueries 무엇인가?

queryClient.invalidateQueries 메서드를 사용하면 특정 쿼리의 status를 즉시 stale로 변경하여 백그라운드 단에서 refetch가 발생하여 변경된 데이터를 업데이트할 수 있습니다.

useMutation 훅스에서 서버와 데이터를 성공적으로 통신 후에 많이 사용되는 메서드입니다.

 

🤷‍♂️ 마지막으로

---

useMutation에 개념과 활용하는데 가장 중요한 4 자기의 콜백함수를 알아보았습니다.

각 콜백 함수는 서버 요청의 다른 단계에서 호출되며 각각에 콜백 함수를 통해서 효율적으로 서비스 로직을 처리할 수 있습니다.

useMutation 훅스는 서버와 클라이언트의 상태를 다루는데 매우 효율적이며 다양한 옵션들을 활용해서 사용자에게 좋은 UI/UX 경험을 제공할 수 있습니다.

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

https://fnfentermagazine.com/%ec%8a%a4%ec%bd%94%ed%94%84%ec%9d%98-%ea%b0%9c%eb%85%90/

[자바스크립트 1탄] 자바스크립트 스코프의 개념과 예제 알아보기

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리