[React Hook] useMutation()

useMutation이란 ?

get 이외의 method을 호출할 때 사용하는 React Hook이다. 서버쪽 상태를 변경하는 내용이 주를 이루기 때문에 useQuery보다 간단한 구성을 이루고 있다.

사용방법

예를 들어 로그인 api에 POST를 한다면 다음처럼 사용할 수 있다.
useMutation Hook 파일에서 다음처럼 설정하고

export default function useMutation(url) {
  const [state, setState] = useState({
    loading: false,
    data: undefined,
    error: undefined,
  });
  function mutation(data) {
    setState(prev => ({ ...prev, loading: true }));
    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
      .then(response => response.json)
      .then(data => setState(prev => ({ ...prev, data })))
      .catch(error => setState(prev => ({ ...prev, error })))
      .finally(() => setState(prev => ({ ...prev, loading: false })));
  }
  return [mutation, { ...state }];
}

프론트엔드에서 해당 훅에 /account/login url을 넣어 login이라는 함수와 loading, data, error등의 데이터를 반환 받는다.

그 후에 data값을 login이라는 함수에 넣어 post하여 loading, data, error 값을 api로부터 받아 올 수 있다.

# login.js
export default function login() {
	const [login, { loading, data, error }] = useMutation('/account/login');
    const onSubmit = (data) =>{
    	login(data)
    }
	..........	
}