React Hook Form

React Hook Form

• React 애플리케이션에서 폼을 효율적으로 관리할 수 있게 해주는 라이브러리
• 성능이 좋고, 유연하며, 적은 코드로 복잡한 폼을 구현할 수 있음

 

주요 특징

성능 최적화

• 불필요한 리렌더링 방지 (Uncontrolled components를 사용하여 입력값 변경 시 전체 폼이 리렌더링되지 않음)
• 의존성 없음, 매우 가벼운 용량

쉬운 폼 검증

• 내장된 유효성 검사 기능을 제공
• Yup, Zod 등의 외부 검증 라이브러리와 통합이 가능

적은 코드량

• 보일러플레이트 코드를 줄여줌
• 직관적인 API를 제공

 

 

주요 Hook과 메서드, 옵션

import { useForm } from "react-hook-form";

const {
  register,
  handleSubmit,
  formState: { errors },
  watch,
  setValue, // 개별 필드의 값을 변경
  reset     // 폼 전체의 값을 초기화
} = useForm({
  defaultValues: {
    email: '',
    password: ''
  },
  mode: 'onSubmit'
});

 

1. useForm

• 폼의 상태와 메서드를 제공하는 핵심 훅
• register, handleSubmit, formState 등의 메서드를 제공

2. register

<input {...register("email", {
  required: "이메일은 필수입니다",
  pattern: {
    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
    message: "올바른 이메일 형식이 아닙니다"
  }
})} />

• 폼 필드를 등록하는 함수
• 유효성 검사 규칙 설정
• 필드의 참조를 관리

3. handleSubmit

const onSubmit = (data) => console.log(data);
<form onSubmit={handleSubmit(onSubmit)}>

• 폼 제출을 처리하는 함수
• 유효성 검사 통과 시 데이터 처리
• 실패 시 에러 처리

4. formState

const { 
  isDirty,      // 폼이 수정되었는지
  isSubmitting, // 제출 중인지
  errors,      // 유효성 검사 에러(메세지 포함)
  isValid      // 모든 유효성 검사 통과 여부
} = formState;

// 사용
const { isDirty, isValid } = formState;
return <button disabled={!isDirty || !isValid} />;

• 폼의 상태 정보를 담고 있음

5. watch

const { register, watch } = useForm();
const hasPhone = watch("hasPhone");

return (
  <>
    <input type="checkbox" {...register("hasPhone")} />
    {hasPhone && (
      <input {...register("phoneNumber", {
        required: "전화번호는 필수입니다"
      })} />
    )}
  </>
);

• 폼 필드의 값을 실시간으로 관찰

6. setValue

setValue('email', 'hayoung@naver.com');

• 개별 필드의 값을 변경할 때 사용

7. reset

• 폼 전체의 값을 초기화할 때 사용
• 입력 값, 오류, 더티 필드, 터치된 필드 등 모든 상태 초기화

8. defaultValues

• 폼의 초기값을 설정하는 옵션
• 동기식 및 비동기식 할당 모두 지원
• 캐시되며, 재설정하려면 reset API 사용 필요
• 기본적으로 제출 결과에 포함되며 undefined 기본값 설정은 피하기

9. mode 옵션

• OnBlur : 입력 필드가 포커스를 잃을 때 검증
• onChange : 입력값 변경 시 즉시 검증 (다수의 리렌더링이 발생할 수 있어 성능에 영향을 줄 수 있음)
• onSubmit : 폼 제출 시에만 검증
• all : 모든 이벤트에서 검증

 

react-hook-form 사용하기

1. 설치

// npm
npm install react-hook-form
// yarn
yarn add react-hook-form

 

2. 기본 설정

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

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
}

 

3. 폼 필드 등록

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("username", {
    required: "사용자 이름은 필수입니다",
    minLength: {
      value: 2,
      message: "2글자 이상 입력해주세요"
    }
  })} />
  {errors.username && <p>{errors.username.message}</p>}
</form>

 

4. 제출 처리

const onSubmit = async (data) => {
  try {
    await submitAPI(data);
    reset(); // 폼 초기화
  } catch (error) {
    console.error(error);
  }
};

 

 

Zod 와 통합하기

1. resolvers 설치

npm install @hookform/resolvers zod
yarn add @hookform/resolvers zod

 

2. 스키마 정의 후 useForm 설정

import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
});

const { register, handleSubmit } = useForm({
  resolver: zodResolver(schema)
});

 

3. 폼 구현