이것은 내가 최근에 발견했고(React Bricks CMS의 베타 구독을 구축하기 위해) 내가 좋아하는 라이브러리에 대한 매우 짧은 게시물입니다: React Hook Form .

나는 Redux Form (여전히 내 오래된 프로젝트를 괴롭히고 있음)에서 왔으며 .

오늘 저는 Formik을 대체하여 모든 곳에서 React Hook Form을 사용합니다.

왜요?

포믹 1. 더 적고 깔끔한 코드

이것이 내가 React Hook Form을 좋아하는 주된 이유입니다. 다른 라이브러리 중 가장 적은 양의 코드를 가지고 있습니다. 후크를 실행하고 필드에 ref를 추가하기만 하면 됩니다. 완료.

유효성 검사는 제공된 required , min , max , minLength , maxLength , pattern , validate 규칙을 사용하여 1초 안에 추가됩니다.

기본적으로 유효성 검사 오류가 있는 첫 번째 필드에 중점을 둡니다.
원하는 경우 중앙 집중식 스키마를 사용할 수 있습니다.

그리고... 저는 Hooks를 좋아합니다. 일반적으로 Render Props에서 발생하는 래퍼 지옥 문제를 완전히 피할 수 있습니다(Hooks가 Higher Order Components 및 Render Props보다 우수한 이유를 설명합니다).

다음은 유효성 검사가 완료된 간단한 예입니다.

import React from 'react'
import { useForm } from 'react-hook-form'

const Example = () => {
  const { handleSubmit, register, errors } = useForm()

  const onSubmit = values => {
    console.log(values)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>

      <input
        name="fullName"
        ref={register({ required: true })}
      />
      {errors.fullName && <span>Enter your name</span>}

      <input
        name="email"
        ref={register({
          required: 'E-mail required',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
            message: "Enter a valid email address"
          }
        })}
      />
      {errors.email && errors.email.message}

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

아주 쉽죠?

예 2. 문서

문서는 읽는 즐거움입니다.
이것은 매우 훌륭하고 아름답습니다. 제게 이것은 매우 중요합니다.

3. UI 라이브러리와의 손쉬운 통합

react-select와 매우 쉽게 통합하고 사용자 정의 양식 구성 요소를 순식간에 래핑했습니다.

여기서 마찰이 없다는 것은 기존 구성 요소의 스택과 얼마나 잘 작동할지 걱정하지 않고 사용할 수 있음을 의미합니다. 잘 작동합니다.

4. 초경량 및 제로 의존성

기술 부채 관점에서 매우 좋은 종속성이 전혀 없으며... 5KB에 불과합니다!

5. 성능

나는 몇 밀리초의 차이로 라이브러리를 평가하는 사람 중 한 사람이 아니지만, 이 관점에서도 React Hook Form은 모든 것을 능가합니다. 다시 렌더링 횟수를 최소한으로 줄이고 더 빠르게 마운트합니다. Formik 또는 Redux Form보다.

6. 배터리 포함

양식 작성기

React Hook Form은 과 함께 제공되어 특히 간단한 유효성 검사 규칙이 있는 빠른 양식에 유용합니다.

양식 작성기 개발 도구

양식 상태를 디버그하는 자체 개발 도구가 있습니다.
아직 사용하지 않은 것은 인정하지만 있으면 좋은 플러스라고 생각합니다.

결론

사실 더 달라고 할 수가 없었다.
그래서... 예, 제 생각에는 이것이 오늘날 최고의 React 양식 라이브러리입니다.

당신의 의견을 알려주세요!