Zod는 입력 데이터(폼 데이터, API 응답, JSON, 객체 등)를 타입과 형태에 맞게 검증하는 라이브러리 입니다. 내가 원하는 데이터 구조를 정의해두고, 실제 데이터가 그 구조에 맞는지 검사하는 용도로 사용됩니다. 특히 TypeScript 환경에서 타입과 런타임 검증을 동시에 할 수 있다는 점이 가장 큰 장점입니다.
Zod 가 뭐지?
■ 개념 정의 : Zod는 입력 데이터(폼 데이터, API 응답, JSON, 객체 등)를 타입과 형태에 맞게 검증하는 라이브러리 입니다. 내가 원하는 데이터 구조를 정의해두고, 실제 데이터가 그 구조에 맞는지 검사하는 용도로 사용됩니다. 특히 TypeScript 환경에서 타입과 런타임 검증을 동시에 할 수 있다는 점이 가장 큰 장점입니다. ■ 사용목적 ⓐ 타입 스크립트 타입을 정의하거나, 런타임 데이터를 검증하는 데 사용합니다. ⓑ 빠르고, 사용법이 직관적이며 yup, joi 보다 가볍고 타입 스크립트에 친화적 이라고 합니다. ⓒ NestJS, React, Next.js, tRPC, Vite 와 호환성이 높다고 합니다.
주요 메서드
Zod 에서 자주 사용하는 메서드 입니다.
| 메서드 | 설명 | 예시 |
|---|---|---|
| z.string() | 문자열 인지 확인 | ‘hello’ : o 123 : x |
| z.number() | 숫자 인지 확인 | 123 : o ‘abc’ : x |
| z.boolean() | true / false 인지 확인 | true : o ‘true’ : x |
| z.array() | 배열 인지 확인 | [1,2,3] : o ‘123’ : x |
| z.object() | 객체 인지를 확인하고, 내부 구조(스키마)까지 검증 | {name:’a’} : o |
| .min(n) | 최소값(숫자) 또는 최소 길이(문자열/배열)를 확인 | z.string().min(3) |
| .max(n) | 최대값(숫자) 또는 최대 길이(문자열/배열)를 확인 | z.number().max(10) |
| .email() | 문자열이 이메일 형식인지를 확인 | ‘a@b.com’ : o |
| .optional() | 값이 있어도 되고, 없어도 됨 | undefined : o |
| .nullable() | null 허용 | null : o |
| .safeParse(data) | 데이터 검증하고 결과 반환 | 결과 : success/data/error |
사용 예시
■ 설치방법
<< bash
npm install zod
>>
■ 기본 사용법 : 스키마 검증
ⓐ 데이터에서 스키마(숫자, 문자열, 이메일)가 맞는지 검사하고, 맞다면 data를 반환하고 아니면 error을 반환합니다.
<< ts (타입스크립트)
import { z } from 'zod';
// 스키마 정의
const UserSchema = z.object({
name: z.string(),
age: z.number(),
email: z.string().email(),
});
// 데이터 검증
const result = UserSchema.safeParse({
name: '혜인',
age: 25,
email: hello@yonghyein.kr',
});
if (!result.success) {
console.log(result.error);
} else {
console.log(result.data);
}
■ 기본 사용법 : 폼 데이터 검증(React)
ⓐ 이메일 폼 등에서 입력 값을 검증하는데 사용하는 예시, username이 3자 이상, password가 6자 이상 아니면 에러 반환합니다.
<< ts
const schema = z.object({
username: z.string().min(3),
password: z.string().min(6)
})
const formData = {
username: 'ab',
password: '12345',
};
const check = schema.safeParse(formData);
if (!check.success) {
console.log(check.error.format());
}
■ 기본 사용법 : 메서드 사용 예시
<< ts
const schema = z.object({
title: z.string().min(3), // 문자열, 최소 3자
views: z.number().min(0), // 숫자, 최소 0
isPublished: z.boolean(), // true/false
tags: z.array(z.string()), // 문자열 배열
email: z.string().email(), // 이메일 형식
description: z.string().optional(), // 있어도 되고 없어도 됨
});
>>
답글 남기기