Skip to content

React Hook Form

유연하고 확장 가능한 사용하기 쉬운 고성능 폼 검증 라이브러리

React Web

React Native

DX

직관적이고 완벽한 기능의 API를 통해 폼을 만드는 개발자들에게 우수한 경험을 제공합니다.

HTML 표준

기존 HTML 마크업을 그대로 사용하고, 제약 기반의 유효성 검사 API를 사용하여 폼의 유효성을 검사할 수 있습니다.

가벼움

패키지의 크기도 성능만큼 중요합니다. React Hook Form은 별도의 의존성이 없는 작은 라이브러리입니다.

성능

렌더링 횟수를 최소화하고 마운트 속도를 높여 최고의 사용자 경험을 제공하기 위해 노력하고 있습니다.

사용성

폼 상태는 로컬에서 관리되기 때문에 다른 의존성 없이 쉽게 사용할 수 있습니다.

장학금

생산성 부스터 부문 2020 GitNation React OS Award 수상.

라이브러리 코드 비교

작성하는 코드 양을 줄이는 것은 React Hook Form의 주요 목표 중 하나입니다. 인기있는 폼 유효성 검사 라이브러리와 아주 간단한 비교를 해 보겠습니다.

⚠ 참고: 아래의 Formik 및 Redux-Form 공식 문서에서 가져온 것입니다.

React Hook Form

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

const Example = () => {
  const { handleSubmit, register, formState: { errors } } = useForm();
  const onSubmit = values => console.log(values);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="email"
        {...register("email", {
          required: "Required",
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: "invalid email address"
          }
        })}
      />
      {errors.email && errors.email.message}

      <input
        {...register("username", {
          validate: value => value !== "admin" || "Nice try!"
        })}
      />
      {errors.username && errors.username.message}

      <button type="submit">Submit</button>
    </form>
  );
};

컴포넌트의 리랜더링을 분리하기

페이지나 앱의 퍼포먼스에 부정적인 영향을 줄 수 있는 리랜더링을 분리할 수 있습니다. 아래의 예제는 그 차이를 보여줍니다.

참고: 인풋 박스에 타이핑해보시고 어떻게 랜더링되는지 확인해보세요.

React Hook Form

Child Component A
Child Component B
Child Component C

VS

Controlled Form

Child Component A
Child Component B
Child Component C

Subscriptions

퍼포먼스는 폼을 만들 때 사용자 경험에 큰 영향을 주는 요소입니다. 전체 폼이 리랜더링되지 않으면서도 각각의 입력값 변화를 관찰할 수 있습니다.

더욱 빠른 마운트 속도

아래 결과는 컴포넌트를 렌더링하고 마운트하는데 걸린 시간을 보여줍니다. 결과는 Chrome Dev Tool의 Performance 탭에서 CPU 성능을 6배 낮춘 환경에서 측정하였습니다. 실행한 코드는 상단의 라이브러리 코드 비교 섹션에서 가져왔습니다.

React Hook Form

  • 마운트 횟수: 1
  • 변경 요청 횟수: 1
  • 전체 소요된 시간: 1800ms
React Hook Form performance

Others

  • 마운트 횟수: 6
  • 변경 요청 횟수: 1
  • 전체 소요된 시간: 2070ms
Formik performance
  • 마운트 횟수: 17
  • 변경 요청 횟수: 2
  • 전체 소요된 시간: 2380ms
Redux Form performance

Highlights

This project is getting recognized by the community and industry. It's helping more developers to build forms in React than ever.

The Community

Build and drive by the community. On a mission to make every React developer's life easier when it comes to building forms.

라이브 데모

아래 폼은 실행중인 폼 검증을 보여줍니다. 각 열은 커스텀 훅에서 측정된 내용을 보여줍니다.
수정 버튼을 클릭하여 폼 필드를 수정할 수 있습니다.

예시

or

감시

ⓘ 값을 확인하려면 입력 필드의 값을 변경하세요.

{}

오류

ⓘ 검증 오류가 이곳에 표시됩니다.

변경됨
ⓘ 변경된 필드가 이곳에 표시됩니다.
[]
유용하고 흥미로운가요?
폼의 유효성을 검사하는 것은 더욱 간단해야 합니다. React Hook Form을 사용하면 코드는 적게 쓰고 성능은 더욱 향상시킬 수 있습니다. 시작하기 섹션을 확인한 다음 API 페이지에서 자세히 알아보세요.