어떤 폼 라이브러리를 써야할까? React 편 (2024.01.02 updated)

프론트엔드에서 빠질 수 없는 기능이라 하면 Form입니다.

그만큼 많은 라이브러리가 있고 다양한 사용법이 있습니다.

많은 라이브러리 중 어떤 라이브러리를 사용할지 고민이라면 바로 비교해보세요

React Hook Form

스탯

NPM 다운로드	1,920,000
Github 스타	33,000

특징

성능: 다시 렌더링 횟수를 최소화하고 유효성 검사 계산을 줄이며 더 빠른 마운팅을 지원합니다.

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

표준: 네이티브 HTML 양식 유효성 검사를 적극적으로 활용합니다.

채택 가능: 다른 의존성 없이 쉽게 도입할 수 있습니다. Yup, Zod, AJV, Superstruct, Joi 및 기타 라이브러리를 지원합니다.

설치

npm i react-hook-form

사용법

import { useForm } from 'react-hook-form';
    function App() {
      const {
        register,
        handleSubmit,
        formState: { errors },
      } = useForm();

      return (
        <form onSubmit={handleSubmit((data) => console.log(data))}>
          <input {...register('firstName')} />
          <input {...register('lastName', { required: true })} />
          {errors.lastName && <p>Last name is required.</p>}
          <input {...register('age', { pattern: /d+/ })} />
          {errors.age && <p>Please enter number for age.</p>}
          <input type="submit" />
        </form>
      );
    }