[React Hook Form] React Hook Form 공부 - 15 (handleSubmit 에러 발생시) [7/26 study]

React Hook Form 공부 - 15

 

handleSubmit 에러 발생시

useForm() 함수가 리턴 하는 handleSubmit 함수를 이용해서 폼의 Submit 핸들링을 담당하는 함수를 지정했었습니다. 

그런데, Submit이 실패했을 때도 핸들링할 수 있는 함수를 제공하는데요. 

handleSubmit 함수에 두 번째 인자가 폼 Submit이 실패했을 때 실행되는 콜백함수입니다

<form onSubmit={handleSubmit(onSubmit, onError)} noValidate>

 

위 코드와 같이 onSubmit 함수는 우리가 Submit이 성공했을 때 작동되도록 만든 함수이고, onError 함수는 Submit이 실패했을 때 작동되도록 만들 예정인 함수입니다

import { useForm, useFieldArray, FieldErrors } from "react-hook-form";

  const onError = (errors: FieldErrors<FormValues>) => {
    console.log("Form errors", errors)
  }

 

위와 같이 FieldErrors 항목을 import 하고 errors에 대한 타입을 위와 같이 지정해 주면 됩니다. 

onError 함수는 폼의 Validation 에러가 나도 작동됩니다. 

아래 그림을 보시면 username을 빈칸으로 한 다음 submit 버튼을 눌렀을 때 콘솔창입니다.

 

이렇게 onError 함수는 에러 발생 시 좀 더 커스텀하게 에러 메시지를 핸들링하기 위한 함수입니다.