설치

npm install react-hook-form

기존 form

useForm

import { useForm } from "react-hook-form";

function MyForm() {
  const { register, handleSubmit, formState, setError, setValue } = useForm();
	
	...
	return(
		<form onSubmit={handleSubmit(onValid, onInvalid)}>
				<input {...register("key", { options } />
			
		</form>
	)
}

register

: 입력 필드의 등록을 담당함

<input {...register("key", { options } />

1. key : 입력필드를 구분하는 고유한 이름. 나중에 폼 데이터를 받을 때 사용됨.
2. options : 유효성 규칙을 검사할 때 사용

   1. { required: "에러 메시지를 직접 작성" }

   2. { minLength: { value: 8, message: "에러 메시지를 직접 작성" } } // maxLength 동일

   3. { pattern: { value: /^\S+@\S+$/i, message: "이메일 형식이 아닙니다." } } // 정규 표현식 검사

   4. validate : 나만의 유효성 검사 규칙을 만들 때 사용 ⇒ return이 되는것은 error message

      validate: { // '규칙이름1': (value) => (검사조건1) || "실패 시 에러 메시지1", // '규칙이름2': (value) => (검사조건2) || "실패 시 에러 메시지2", }

      → 인자로 들어간 함수에 async 함수를 넣어 서버에 받아온 것을 검사할 수 있음

handleSubmit