React-query useMutation 간단히 사용해보고 정리
개요
서버 상태 관리 라이브러리로 React-query를 사용하면서 서버에서 받은 데이터를 캐싱, 로딩 상태 관리 등 많은 기능을 사용할 수 있다는 것을 느꼈습니다. 여기서 특정 기능을 구현하기 위해 서버에서 데이터를 받을 때 뿐만 아니라 서버로 데이터를 보낼때도 사용할 수 있는지 찾아봤고 useMutation을 사용하면 된다는 것을 확인해보고 사용해봤습니다.
코드
import React from 'react';
const Button: React.FC = ({
nickname,
setIsChecked,
}) => {
const {
data,
mutate,
isLoading,
isError,
error,
isSuccess,
} = useMutation(ValidationApi);
// or
const validMutation = useMutation(ValidationApi);
const handleClick = () => {
mutate(nickname); // mutate는 서버로 데이터를 보내는 trigger
};
return (
<button
type="button"
onClick={handleClick}
/>
);
};
export default Buttonhttps://tanstack.com/query/v4/docs/reference/useMutation
useMutation | TanStack Query Docs const { data, tanstack.com
전송시 설정할 수 있는 option과 서버로 데이터를 보내는 작업을 수행할 때 return state를 확인할 수 있습니다