[React Hook Form] React Hook Form 공부 - 5 (에러 메시지 표현하기) [7/25 study]

React Hook Form 공부 - 5

 

에러 메시지 표현하기

에러 메시지를 표시하기 위해 React-Hook-Form에서 제공해 주는 게 바로 formState 객체인데요. 

실제는 formState 안에 있는 errors 객체가 최종적으로 우리가 사용하는 겁니다.

 

const {
    register,
    control,
    handleSubmit,
    formState
  } = useForm<FormValues>();
const { errors } = formState;

// 아래가 축약버전

const {
    register,
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>();

 

이제 form 태그에 p 태그를 덧붙혀 보겠습니다.

<p>{errors.username?.message}</p>  // p 태그를 만들고 각각의 input 태그 다음에 위치시켜 주면 됩니다.
<p>{errors.email?.message}</p>
<p>{errors.password?.message}</p>