설치하기

npm install react-hook-form

<useForm> 사용하기

import { useForm } from "react-hook-form"; 
const {register, watch} = useForm();

• register : onBlur, onChange, onClick, ref를 return하는 함수

  • register 함수가 반환하는 객체를 input의 props로 사용할 수 있음.

  <input {...register("category") ...> 
  

  • <input onSubmit={} onClick={} onBlur={} ref={}> 와 같은 느낌?

• watch : form의 입력값들의 변화를 관찰할 수 있게 해주는 함수

handleSubmit을 이용하여 <Form>의 onSubmit 이벤트 대체하기

사용방법

const {register, handleSubmit} = useForm();
<form onSubmit={handleSubmit(parameter)}>

handleSubmit 함수 설명

• 첫번째 인자(필수): 데이터가 유효할 때 호출되는 함수
• 두번째 인자(필수X): 데이터가 유효하지 않을 때 호출되는 함수

input의 유효성 검사하기

<input {...register("email",{required: true})} />
//이 상태에서 input에 값을 적지 않고 내보내면...
//react-hook-form이 값이 유효한지(값이 있는지 없는지) 확인 후 
//오류가 있는 부분에 focus 해준다.
<input {...register("email",{required: true, minLength: 10})} />
//쓰면 글자수도 확인해줌

formState으로 에러메세지 보여주기

const {register,  handleSubmit, formState:{errors}} = useForm();
<input {...register("email",{required: "이메일을 입력하세요"})} />
<span>{errors?.email?.message}</span>