[React] React Hook Form 이란?

React Hook Form이란 form의 validation을 도와주는 라이브러리이다.

 

ref를 기반으로 하기 때문에 다른 UI 라이브러리와 호환이 잘 된다.

 

1. useForm

form을 만들기 위해서는 useForm을 사용해야 한다.

useForm에는 form을 만들기 위한 다양한 옵션이 있는데, 아래와 같다.

const {
    register, handleSubmit, formState: { errors }, reset, resetField,
  } = useForm();

(실제 더 많은 함수가 존재한다.)

 

2.register

register를 사용하면 입력하거나 요소를 선택하고 react hook form validation을 적용할 수 있다.

validation은 모두 HTML 표준을 기반으로 하며 사용자 지정 validation도 허용한다.

 

register를 콘솔로 보면 다음 그림과 같다.

객체 안에 name, onChange, ref, onBlur가 있는 형태이다.

따라서 input 태그에 register를 사용할땐 다음과 같이 사용해야한다.

 <input
        className="bg-yellow-200"
        {...register("username", {
          required: true,
          minLength: 5
        })}
        type="text"
        placeholder="Username"
      />

...register 를 쓰는 이유가 위에서 언급한 것과 같이 객체안에 name, onChange 등등의 내용이 있기 때문이다.

 

3.formState:{errors} 사용법

console.log(errors)을 보면 다음과 같다.

처음에는 {} 이렇게 아무것도 없다가 생성하기 버튼을 누르면 error에 대한 내용이 나온다.

따라서 errors.username?.massage를 통해 해당 form에 에러가 있으면 표시할 수 도 있다.

 

4.handleSubmit 사용법

handleSubmit은 form을 submit할 때 데이터를 핸들링 해주는 함수이다.

즉 form validation을 해서 올바르면 데이터를 남기고 올바르지 않으면 error를 나타낸다.

 const onValid = (data: LoginForm) => {
    console.log("성공");
    console.log(data);
  };
  const onInvalid = (errors: FieldErrors) => {
    console.log("실패");
    console.log(errors);
  };
  
   return (
      <form className="mt-10" onSubmit={handleSubmit(onValid, onInvalid)}>
      ...
      ...
      ...
      </form>
    )

위처럼 onValid, onInvalid를 해준다.

 

 

react hook form을 이용하면 단순히 몇 줄만으로도 저렇게 간단하고 강력한 validation을 검사를 할 수있다.