Skip to content

React Hook Form

성능이 좋고, 유연하며 확장 가능한 폼에 사용하기 쉬운 유효성 검사 기능이 포함되어 있어요.

React Web

React Native

개발자 경험(DX)

직관적이고 완벽한 기능을 갖춘 API로 개발자가 폼을 구축할 때 원활한 경험을 제공해요.

HTML 표준

기존 HTML 마크업을 활용하고, 우리의 constraint-based 벨리데이션 API로 폼을 검증하세요.

매우 가벼워요

패키지 크기는 중요해요. React Hook Form은 어떤 의존성도 없는 작은 라이브러리예요.

성능

리렌더링을 최소화하고, 밸리데이션 계산을 최소화하며 마운트 속도가 더욱 빨라요.

적용 가능성

폼의 상태는 본래 지역적이므로, 다른 의존성 없이 쉽게 적용할 수 있어요.

사용자 경험(UX)

최상의 사용자 경험을 제공하기 위해 노력하며, 내부적으로 일관된 밸리데이션 전략을 사용하고 있어요.

SUPPORTED AND BACKED BY

Casino ReviewsBEEKAI Form builderroute4me

더 적은 코드로, 더 나은 성능을 경험하세요.

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

  • No. of mount(s): 1
  • No. of committing change(s): 1
  • Total time: 1800ms
React Hook Form performance

Others

  • No. of mount(s): 6
  • No. of committing change(s): 1
  • Total time: 2070ms
Formik performance
  • No. of mount(s): 17
  • No. of committing change(s): 2
  • Total time: 2380ms
Redux Form performance

하이라이트

React Hook Form은 커뮤니티와 업계에서 인정받고 있어요. RHF 덕분에 개발자들이 React에서 폼을 만드는 데 더 많은 도움을 받고 있어요.

Javascript Rising Star

React Hook Form은 훅 생태계에서 성장하고 발전했어요. React 개발의 일부분을 간단하게 만들어줘요.

React Open Source 수상

2020년 GitNation React OS의 생산성 향상 부문에서 수상했어요.

Technology Radar

이 프로젝트가 rador의 언어&프레임워크 부문에 속한다는 것은 행운이에요.

커뮤니티

커뮤니티에 의해 구축되고 주도돼요. 모든 React 개발자가 폼을 더 쉽게 만들 수 있도록 하는 것이 미션이에요.

바로 여기에 있어요. 잘 설계되어 있으면서도 필요할 때 유연하게 사용할 수 있는 React 폼 라이브러리. 몇 년 동안 React 폼을 사용하다가 react-hook-form으로 전환한 것은 마치 초능력처럼 느껴져요. 모든 것이 더 빠르게 실행되고 코드가 더 깔끔해졌어요.

react-hook-form의 도움으로 React 애플리케이션에서 폼을 만드는 것은 이제 복잡하지 않아요. 유효성 검사가 매우 간단하기 때문에 대부분의 경우 이 패키지를 사용하여 폼을 만들어요. Formik을 사용하는 것을 멈추고 나서 이게 제게는 최고의 폼 만들기 도구에요. 사용자 인터페이스와 성능이 매우 뛰어나요.

제가 React 앱을 만들면서 사용해본 폼 라이브러리 중에서 이게 최고에요. 유용하면서도 간단해서죠. 유용한 tool들이 많고, Formik이나 Redux Form과 비교하면 코드가 많이 필요하지 않아요. 애플리케이션의 리렌더링 횟수가 적고, 마운트 시간이 짧아서 매우 smooth해요.

라이브 데모

아래의 폼은 폼 검증이 어떻게 동작하는지 보여줘요. 각 열은 커스텀 hook에서 저장된 내용을 나타내요. 수정 버튼을 클릭하여 폼의 필드를 변경할 수도 있어요.

Example

or

Watch

ⓘ 입력값을 변경하면 관찰되는 값(watched value)이 업데이트돼요.

{}

Errors

ⓘ 밸리데이션 에러가 여기에 표시돼요.

Touched
ⓘ 터치된 필드는 이곳에 나타나요.
[]
시작할 준비가 되셨나요?
폼 처리는 까다롭지 않아야 해요. React Hook Form은 더 적은 코드로 더 나은 성능을 달성하는 데 도움을 줘요.
시작하기API
Edit