React Hook Form 이란?

form 유효성 검사를 쉽게 할 수 있고 성능 향상을 기대할 수 있는 라이브러리

install

npm install react-hook-form
yarn add react-hook-form

import

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

useForm()

useForm은 다음과 같은 api 들을 갖고있다.
자세한 설명과 더 많은 api는 공식문서를 참고하자.
React Hook Form 공식문서

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

사용 후기

기존의 useState으로 유효성 검사를 할때는
input마다 각각의 state을 만들고 error state, loading state 까지 생성하다보니
관리해야할 상태가 굉장히 많았고, 그에따른 유효성 검사 로직까지 작성하다보니 코드가 굉장히 길어지고 복잡했다.

그에 비해 React Hook Form은 따로 상태를 만들 필요없이 data, isLoading, errors등과 같은 API들을 갖고있어 따로 상태를 관리할 필요가 없었다.
이로 인해 코드를 획기적으로 줄일수 있었고 생산성이 크게 향상된 느낌이었다.

예제 코드

• typescript가 포함되어 있습니다.

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

interface IForm {
  email: string;
  firstName: string;
  lastName: string;
  username: string;
  password: string;
  password1: string;
  extraError?: string;
}

function Form() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<IForm>();
  
  const onValid = (data: IForm) => {
    if (data.password !== data.passwordConfirm) {
      setError(
        "password1",
        { message: "비밀번호를 확인해주세요." },
        { shouldFocus: true }
      );
    }
  };
  
  return (
    <div>
      <form
        style={{ display: "flex", flexDirection: "column" }}
        onSubmit={handleSubmit(onValid)}
      >
        <input
          {...register("email", {
            required: "이메일을 입력해주세요.",
            pattern: {
              value: /^[A-Za-z0-9._%+-]/,
              message: "이메일 양식을 확인해주세요.",
            },
          })}
          placeholder="Email"
        />
        <span>{errors?.email?.message}</span>
        <input
          {...register("firstName", {
            required: "write here",
            validate: {
              noRussia: (value) =>
                value.includes("Russia") ? "러시아는 입력할수 없습니다." : true,
            },
          })}
          placeholder="성"
        />
        <span>{errors?.firstName?.message}</span>
        <input
          {...register("lastName", { required: "성을 입력해주세요." })}
          placeholder="이름"
        />
        <span>{errors?.lastName?.message}</span>
        <input
          {...register("password", { required: "비밀번호를 입력해주세요.", minLength: 5 })}
          placeholder="비밀번호"
        />
        <span>{errors?.password?.message}</span>
        <input
          {...register("passwordConfirm", {
            required: "비밀번호 확인을 입력해주세요.",
            minLength: {
              value: 5,
              message: "비밀번호를 5자 이상 입력해주세요.",
            },
          })}
          placeholder="비밀번호 확인"
        />
        <span>{errors?.password1?.message}</span>
        <button>Add</button>
        <span>{errors?.extraError?.message}</span>
      </form>
    </div>
  );
}
export default Form;