react-hook-form (useForm) 사용

React Hook Form

react-hook-form은 React에서 Form을 쉽게 만들기 위한 라이브러리로, 성능이 좋고 유연하며 유효성 검사에 탁월하다. 

 

 

장점

• 적은 코드로 더 좋은 퍼포먼스를 낼 수 있다.
• 다른 라이브러리 혹은 React에 비해 리렌더링 수가 적다.
• 로딩속도가 빠르다. (Fast Mounting)
• TS를 기본으로 지원한다.

 

설치

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

 

React Hooks Form을 적용하고 싶다면 먼저 useForm이라는 hook을 불러와야 한다.

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

 

 

1. required (필수 값)

input attribute로 required 를 작성하면 사용자가 임의로 조작하여 삭제할 수 있다. 그러나 register를 작성하면 사용자가  임의로 삭제하지 못한다. 

<input
  {...register("name", {
    required: "이름은 필수 값입니다."
  })}
/>;

 

2. maxLength / minLength 

<input
  {...register("id", {
    required: "아이디는 필수 값입니다.",
    minLength: {
      value: 5,
      message: "아이디는 3글자 이상으로 작성해주세요."
    },
    maxLength: {
      value: 10,
      message: "아이디는 10글자 이하로 작성해주세요."
    }
  })}
/>;

 

3. max / min

max / min 값은 숫자에 사용된다.

<input
  type="number"
  {...register("age", {
    required: "나이는 필수 값입니다.",
    valueAsNumber: true,
    min: {
      value: 10,
      message: "나이는 10살 이상이어야 합니다."
    },
    max: {
      value: 100,
      message: "나이는 65살 이하이어야 합니다."
    }
  })}
/>;

valueAsNumber: true 는 input element의 value 값의 type이 number를 의미한다.

 

4. pattern (정규식)

<input
  {...register("nickname", {
    required: "닉네임은 필수 값입니다.",
    pattern: {
      value: /^[a-zA-Z]*$/,
      message: "닉네임은 영어만 가능합니다."
    }
  })}
  type="nickname"
  placeholder="nickname"
/>;

 

5. validate 

위에 나와있는 것 외로도 개발자가 custom하여 validation을 이용할 수 있다. 만약 email을 사용하는데 gmail만 허용하고 싶은 경우 아래와 같이 사용할 수 있다.

<input
  {...register("email", {
    required: "email은 필수 값 입니다.",
    validate: {
      domainCheck: email =>
        email.split("@")[1] === "gmail.com" || "gmail만 가능합니다."
    }
  })}
  type="email"
  placeholder="email"
/>;

async, await 함수를 사용해 비동기 validation도 할 수 있다. 

 

handleSubmit

handleSubmit은 form element에 onSubmit callback으로 등록하면 된다. handleSubmit은 기본적으로 e.preventDefault()를 가지고 있기 때문에 따로 작성할 필요는 없다. 해당 함수는 인자를 받는다. 첫 번째 인자에는 필수 값으로 성공했을 때 실행시킬 함수를 받고, 두 번째 인자는 실패했을 때 실행시킬 함수를 받고 해당 함수는 필수 값은 아니다.

<form
  onSubmit={handleSubmit(
    () => console.log("성공"),
    () => console.log("실패")
  )}
>
  // ... <input .... />
</form>;

 

errors

handleSubmit이 실행되고 난 후 error가 발생하게 되면 해당 error 값들은 formState 객체 안의 erros에 담겨있다. 해당 errors 객체를 이용해서 표시하면 된다. 

errors?.email?.message (옵셔널체이닝은 상황에 맞게 가감)