Skip to content
♥

React Hook Form

쉽게 사용할 수 있는 검증 기능과 함께 성능, 유연성, 확장성을 갖춘 폼.

React Web

React Native

개발자 경험(DX)

직관적이고 기능이 완벽한 API를 제공하여 개발자가 폼을 구축할 때 원활한 경험을 제공합니다.

HTML 표준

기존 HTML 마크업을 활용하고 제약 기반 검증 API로 폼을 검증합니다.

초경량

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

성능

리렌더링 횟수를 최소화하고, 검증 계산을 최소화하며, 더 빠른 마운팅을 제공합니다.

적용 용이성

폼 상태는 본질적으로 로컬이기 때문에 다른 의존성 없이 쉽게 적용할 수 있습니다.

사용자 경험(UX)

최고의 사용자 경험을 제공하고 일관된 검증 전략을 제공하기 위해 노력합니다.

SUPPORTED AND BACKED BY

Casino ReviewsBEEKAI Form builderroute4metwicsysanity io

적은 코드. 더 나은 성능

React Hook Form은 작성해야 하는 코드 양을 줄이고 불필요한 리렌더링을 제거합니다. 이제 다음 예제를 통해 탐색해 보세요:

React Hook Form

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

구독

성능은 폼을 구축할 때 사용자 경험의 중요한 측면입니다. 전체 폼을 리렌더링하지 않고도 개별 입력 및 폼 상태 업데이트를 구독할 수 있습니다.

더 빠른 마운팅

다음 스크린샷은 React Hook Form이 다른 라이브러리보다 얼마나 빠르게 컴포넌트를 마운팅하는지 보여줍니다:

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.

Javascript Rising Star

React Hook Form have matured and evolved around hooks. Simplifies a piece of React development.

React Open Source Awards

The winner of 2020 GitNation React OS Award for the category of Productivity Booster.

Technology Radar

The project is fortunate enough to be under the radar for the Languages & Frameworks section.

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.

This is where it's at. A React form library that is both well thought out and flexible enough to get out of your way when you need it to. After fussing around with React forms for years, switching to react-hook-form feels like a superpower. Everything runs faster and my code is cleaner.

Creating a form is no more complicated while building a react application with the help of react-hook-form. Most of the time I use this package for creating a form as validation is so much simple here. It is the best form maker for me while I stop to work with formika. Very nice user interface and performance are good.

The best React form library that I have ever used while building a react app because of its utility and simplicity. It has a lot of useful tools and doesn’t require much code compared to Formik, and Redux Form. As the number of re-renders in the application is small and mounting time is less it is super smooth.

라이브 데모

다음 폼은 폼 검증이 동작하는 모습을 보여줍니다. 각 컬럼은 커스텀 훅에서 캡처한 내용을 나타냅니다. EDIT 버튼을 클릭하여 폼 필드를 변경할 수도 있습니다.

Example

or

감시

ⓘ 입력 값을 변경하여 감시된 값을 업데이트하세요

{}

오류

ⓘ 검증 오류가 여기에 표시됩니다

터치됨
ⓘ 터치된 필드가 여기에 표시됩니다
[]
시작할 준비가 되셨나요?
폼 처리는 고통스러울 필요가 없습니다. React Hook Form은 더 적은 코드로 더 나은 성능을 달성할 수 있도록 도와줍니다.
시작하기API
Edit