💡React Hook Form

React hook form은 다양한 form 관리 방법과 라이브러리들 중 리액트에서 form으로 작업하기에 좋은 방법이다.

회원가입 기능을 구현하기 위해서는 입력으로 받아야 하는 값이 이메일, 이름, 성, 비밀번호, 비밀번호 확인 등 정말 많다.

react hook form을 사용하지 않는다면, form에 많은 state를 등록해야 하고, form validation(검증) - 데이터 타입 및 조건 확인 - 를 직접(if문을 통해) 해줘야 한다.

npm install react-hook-form

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

const { register, watch, handleSubmit } = useForm();


<input {...register("email")} placeholder="Email"/>

✨ Register Fields

• 컴포넌트를 hook에 register 해서 해당 value 이 form validation과 submission에 사용될 수 있도록 한다.

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

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <select {...register("gender")}>
        <option value="female">female</option>
        <option value="male">male</option>
        <option value="other">other</option>
      </select>
      <input type="submit" />
    </form>
  );
}

• defaultValues 설정

const { register, handleSubmit } = useForm<IFormData>({
  defaultValues:{
    email:"@naver.com"
  }
});

🚩 watch

form의 입력값들의 변화를 관찰할 수 있게 하는 함수

🚩 handleSubmit

validation 수행

• required
• min
• max
• minLength
• maxLength
• pattern
• validate

<form style={{display:"flex", flexDirection: "column"}} 
  onSubmit={handleSubmit(onValid)}>

Validation을 HTML에 의지하는 대신, Javascript에서 validation을 할 수 있다.

<input {...register("email", {required: true})} required placeholder="Email"/>

minLength: 5
//또는 
minLength: {
  value:5,
  message: "Your password is too short"
}

• 정규식 사용하여 validation을 수행할 수 있다.

// 1. 값을 바로 보내기
<input {...register("email", {
  required: true,
  pattern: /^[A-Za-z0-9._%+-]+@naver.com$/,
})} 
// 2. 객체에 넣어서 보내기
<input {...register("email", {
    required: true,
    pattern: {
      value: /^[A-Za-z0-9._%+-]+@naver.com$/,
      message: "Only naver.com emails allowed",
    }
})} 

📌Custom Validation

🚩setError - custom error

validate: {
  noNico: (value) =>
    !value.includes("nico") || "no nico"
}