React Hook Form

React에서 폼을 쉽게 만들고 관리할 수 있도록 도와주는 라이브러리
useForm() 훅 하나로 폼 상태 관리, 유효성 검사, 제출 핸들링 등을 처리

특징

• 간단한 API
• uncontrolled component 방식: 렌더링 감소
• 작은 번들 크기
• 가볍고 빠른 속도
• React와 친화적

주요 함수

useForm(): 폼을 초기화하고 상태를 관리하는 훅
register: 폼 필드와 React Hook Form을 연결하는 역할
handleSubmit: 폼 제출 시 실행되는 함수
formState.errors: 필드별 에러 상태를 관리

환경 설정

npm install react-hook-form

예시

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

type FormValues = {
  name: string;
  email: string;
};

const MyForm = () => {
  const {
    register, // 폼 필드를 등록하는 함수
    handleSubmit, // 폼 제출을 처리하는 함수
    formState: { errors }, // 유효성 검사 에러 관리
  } = useForm<FormValues>();

  const onSubmit = (data: FormValues) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name:</label>
        <input {...register('name', { required: 'Name is required' })} />
        {errors.name && <p>{errors.name.message}</p>}
      </div>
      <div>
        <label>Email:</label>
        <input
          {...register('email', {
            required: 'Email is required',
            pattern: {
              value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
              message: 'Invalid email address',
            },
          })}
        />
        {errors.email && <p>{errors.email.message}</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;