데이터를 조회할 때는 useQuery를 사용합니다. 데이터를 생성/수정/삭제할 때는 useMutation이라는 Hook을 사용하여 구현할 수 있습니다.

useQuery는 비활성화 옵션을 설정하지 않는 이상 컴포넌트가 렌더링되는 시점에 자동으로 요청이 시작되는 반면, useMutation은 특정 함수에서 우리가 원하는 때에 직접 요청을 시작하는 형태로 작동합니다. 이 Hook을 사용하면 요청 관련 상태의 관리와 요청 처리 전/후로 실행할 작업을 쉽게 설정할 수 있습니다.

이번에 구현할 로그인과 회원가입 기능은 데이터를 생성/수정/삭제하는 기능은 아니지만, useMutation을 사용하여 구현하면 로딩 상태 관리가 더욱 편리하기 때문에 회원 인증 기능을 구현할 때 이 Hook을 사용하겠습니다.

이 Hook을 사용하기 전에 사용법을 짚어봅시다. 우선 이 Hook의 예시 코드를 확인해볼까요?

import {useMutation} from 'react-query';

function Sample() {
  const mutation = useMutation(writeArticle, {
    onMutate: (variables) => { 
      /* 요청 직전 처리, 여기서 반환하는 값은 하단 함수들의 context로 사용됨 */
    },
    onError: (error, variables, context) => {
      /* 오류 발생 시 처리 */
    },
    onSuccess: (data, variables, context) => {
      /* 성공 시 처리 */
    },
    onSettled: (data, error, variables, context) => {
      /* 성공 여부와 관계없이 작업이 끝나면 처리 */
    }
  });
  const {mutate, isLoading, isError} = mutation;
}

useMutation을 사용할 때는 첫 번째 인자에 Promise를 반환하는 함수를 넣고, 두 번째 인자에 이 작업이 처리되기 전후로 실행할 함수를 넣은 옵션 객체를 넣습니다. 두 번째 인자는 생략할 수 있습니다.