[ React ] React Hook Form 이란

React Hook Form이란?

React 에서 Form 의 validation 을 쉽게 할 수 있도록 도와주는 라이브러리입니다.
전체 폼이 리렌더링 되지 않으면서, 각각의 입력값 변화를 관찰할 수 있기에 성능도 빠르고 의존성도 적습니다.

설치

yarn add react-hook-form

을 통해 설치할 수 있습니다.

간단한 예제를 통해 사용법을 알아보겠습니다.

React-Hook-Form

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

const App = () => {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstName" ref={register({ required: true })} />
      {errors.firstName && <span>이 값은 비워놓을 수 없습니다</span>}

      <input name="lastName" ref={register({ required: true })} />
      {errors.lastName && <span>이 값은 비워놓을 수 없습니다</span>}

      <input type="submit" />
    </form>
  );
};

간단히 위와 같이 작성하면, 폼을 제출할 때, 입력값을 관찰하고, 입력값이 바뀌면, 바뀐 값을 알 수 있습니다.

Register

<input name="firstName" ref={register({ required: true })} />

register 는 입력값을 관찰하기 위해 사용합니다. 입력값이 바뀌면, register 가 관찰하고 있기 때문에, 바뀐 값을 알 수 있습니다.

handleSubmit

<form onSubmit={handleSubmit(onSubmit)}>

handleSubmit 은 폼을 제출할 때, 입력값을 검증하고, onSubmit 함수를 실행합니다.

errors

{
  errors.firstName && <span>이 값은 비워놓을 수 없습니다</span>;
}

errors 는 입력값이 유효하지 않을 때, 에러 메시지를 보여줍니다. 위의 예제에서는 값을 비워놓으면 에러 메시지가 나타납니다.

Reference

• React Hook Form
• React Hook Form 사용하기