프론트엔드에서 유효성 검사는 사용자의 잘못된 입력을 방지하고, 데이터의 무결성을 보장하는 중요한 과정입니다. 여러 유효성 검사 라이브러리 중 Zod는 가벼우면서도 TypeScript와의 완벽한 호환성을 자랑하는 대표적인 라이브러리입니다. 본 글에서는 Zod와 React Hook Form을 활용해 효율적인 유효성 검사를 구현하는 방법을 살펴보겠습니다.
Zod란?
타입스크립트 기반의 스키마(데이터 유형) 선언 및 유효성 검사 라이브러리 - 공식 문서
Zod의 목표는 유형 선언의 중복을 제거하는 것입니다.
Zod를 사용하면 유효성 검사를 한 번 선언하고 정적 타입스크립트 유형을 자동으로 추론합니다.
Zod의 장점
- 종속성 없음
- Node.js 및 모든 최신 브라우저에서 작동합니다.
- 소형: 8kb 축소 + 압축
- 불변성: 메서드(예 .optional():)는 새 인스턴스를 반환합니다.
- 간결하고 체인 가능한 인터페이스
- 기능적 접근 방식: 분석, 검증하지 않음
- 일반 JavaScript에서도 작동합니다! TypeScript를 사용할 필요가 없습니다.
React Hook Form과 Zod로 유효성 검사하기
설치
우선 환경에 맞는 명령어를 사용하여 패키지를 설치합니다.
// npm
npm install react-hook-form @hookform/resolvers zod
// yarn
yarn add react-hook-form @hookform/resolvers zod
// pnpm
pnpm add react-hook-form @hookform/resolvers zod스키마 정의 폼 컴포넌트 작성
이제 Zod를 사용해 폼 유효성 검사용 스키마를 정의하고, 이를 리액트 훅 폼의 resolver로 적용해 보겠습니다.
import React from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
// Zod 스키마 정의
const schema = z.object({
name: z.string().min(2, "이름은 최소 2글자 이상이어야 합니다."),
email: z.string().email("유효한 이메일 주소를 입력해주세요."),
password: z.string().min(6, "비밀번호는 최소 6자 이상이어야 합니다."),
});
type FormData = z.infer<typeof schema>;
const MyForm: React.FC = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormData>({
resolver: zodResolver(schema),
});
const onSubmit = (data: FormData) => {
console.log("폼 제출 성공:", data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>이름:</label>
<input {...register("name")} />
{errors.name && <p>{errors.name.message}</p>}
</div>
<div>
<label>이메일:</label>
<input {...register("email")} />
{errors.email && <p>{errors.email.message}</p>}
</div>
<div>
<label>비밀번호:</label>
<input type="password" {...register("password")} />
{errors.password && <p>{errors.password.message}</p>}
</div>
<button type="submit">제출</button>
</form>
);
};
export default MyForm;- Zod 스키마 정의:
name,email,password필드를 포함하는 스키마를 정의합니다. 각 필드는 유효성 검사 규칙을 포함하고 있으며, 오류 메시지를 추가로 제공합니다. - useForm 훅:
useForm의zodResolver를 설정하여 Zod 스키마를 기반으로 유효성 검사를 수행합니다. - 폼 렌더링 및 에러 메세지 표시:
register를 통해 각 필드를 등록하고,errors객체를 이용해 유효성 검사를 통과하지 못한 경우 오류 메세지를 표시합니다. - 폼 제출: 유효성 검사를 통과한 데이터가
data에 담깁니다.
Zod의 유효성 검사 메서드
1. 기본 데이터 타입
z.string(): 문자열 데이터z.number(): 숫자 데이터z.boolean(): 불리언 데이터z.date(): 날짜 데이터z.array(): 배열 데이터z.object(): 객체 데이터
2. 문자열 유효성 검사
.min(length, message): 문자열 최소 길이.max(length, message): 문자열 최대 길이.email(message): 이메일 형식 검증.url(message): URL 형식 검증.regex(regex, message): 정규식을 이용한 문자열 패턴 검사.startsWith(prefix): 특정 문자로 시작하는지 확인.endsWith(suffix): 특정 문자로 끝나는지 확인
Zod는 간결한 체인 방식으로 복잡한 유효성 검사 로직을 쉽게 정의할 수 있어 React Hook Form과 함께 유용하게 사용됩니다. 본 글에서 소개한 예시 외에도 다양한 조합으로 유효성 검사 로직을 확장할 수 있으니, 프로젝트에 맞춰 필요한 규칙들을 자유롭게 추가해 보세요. 이제 Zod와 React Hook Form을 활용해 손쉽게 검증 가능한 폼을 구현해 보시길 바랍니다.
✅ 참고
반갑습니다
