TUTORIAL

폼 유효성 검사 완벽 가이드

React Hook Form과 Zod를 활용한 폼 유효성 검사. 성능 최적화된 폼 관리와 타입 안전한 검증 방법을 배웁니다.

럿지 AI 팀
2025-01-14
13분
React Hook Form

성능 최적화된 폼 라이브러리로
적은 리렌더링과 빠른 마운트 속도를 제공합니다.

리렌더링

최소화

번들 크기

8.6KB

타입안전

TypeScript

기본 사용법

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

function LoginForm() {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email", { required: true })} />
      {errors.email && <span>필수 입력</span>}
      <button type="submit">로그인</button>
    </form>
  );
}

유효성 검사 규칙

required

필수 입력

min / max

최소/최대값

minLength / maxLength

문자열 길이

pattern

정규식 매칭

validate

커스텀 함수

valueAsNumber

숫자 변환

Zod 스키마 연동

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

const schema = z.object({
  email: z.string().email('유효한 이메일'),
  password: z.string().min(8, '8자 이상'),
});

useForm({ resolver: zodResolver(schema) });

필수 패키지

react-hook-form
@hookform/resolvers
zod
yup

관련 태그

#React Hook Form
#Zod
#Validation
#Forms
#TypeScript