[TIL] React-hook-form 복습 - register, validate, errors, handleSubmit

💡 TIL 20231019 - React-hook-form 복습 - register, validate, errors, handleSubmit

---

React-hook-form

1. import useForm
2. 컴포넌트에서 useForm을 호출하면 register와 handleSubmit을 사용할 수 있다.
3. form 내의 유효성 검사가 필요한 input들에 register 함수를 호출한다.
   • required, minLength/maxLength, pattern, validate 등

 

 

---

💭 Register 함수

<input
  {...register("email", {
    required: "이메일은 필수 입력사항 입니다.",
    pattern: {
      value: /^[A-Za-z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
      message: "올바른 이메일 형식이 아닙니다.",
    },
  })}
  placeholder="Email"
/>;

• useForm hook으로 불러올 수 있음
• 검사가 필요한 input에서 register 함수를 호출
• react-hook-form이 알 수 있도록 input에 이름을 부여해야 함
  • {...register("email")

 

 

---

💭 Validate 함수

• react-hook-form에서 문자열을 리턴하는 것은 에러 메시지를 리턴하는 것과 같다.
  • ex) validate: (value) => value.includes("babo") ? "babo는 이름에 포함될 수 없습니다." : true
• validate는 하나의 함수 또는 여러 함수가 있는 객체가 될 수 있음
  • input에 여러 개의 유효성 검사가 필요할 수 있기 때문

validate: {
	noBabo: (value) => value.includes("babo") ? "babo는 이름에 포함될 수 없습니다." : true,
	noMelong: (value) => value.includes("melong") ? "melong은 이름에 포함될 수 없습니다." : true,
}

• validate 함수를 비동기 함수(async/await)로 작성하면 서버에 확인 후 응답을 받아서 리턴할 수도 있다.

 

 

---

💭 errors 객체

• 설정한 규칙과 메시지에 따라 알아서 채워지기 때문에 작업하기 간편하다.
• errors 객체는 formState 내부에 존재
• <span>{errors?.email?.message}</span>

 

 

---

💭 handleSubmit

• 모든 validation은 useForm에서 불러온 handleSubmit 함수를 호출하면 수행된다.
• handleSubmit 함수는 onSubmit 이벤트에 등록해야 한다.
  • onSubmit 이벤트는 인자로 onValid 함수 1개만 받는다.
  • onValid 함수는 form 데이터가 유효할 때만 호출된다.

 

 

---

💭 그 외

• defaultValues: input의 기본값 설정
• setErrors: 코드에서 에러를 발생시킬 때 사용
  • shouldFocus: 사용자가 form을 submit할 때 에러가 존재하면 해당 input에 커서를 자동으로 focus해줌