ZOD 설치 방법
npm install zod스키마 정의
import { z } from 'zod';
const schema = z.object({
name: z.string().min(1),
age: z.number().min(18),
});Zod를 사용할 때 z로 가져오는 이유는 Zod 라이브러리의 주요 API를 직관적으로 사용하기 위함
z는 Zod의 다양한 기능(예: 객체, 문자열, 숫자 검증 등)을 네임스페이스처럼 사용할 수 있게 해준다. 이를 통해 코드가 간결해지고, 각 기능에 대한 호출이 쉽게 이루어지므로 가독성이 높아짐.
메서드 정의
z.string().min(1); // 최소 길이 1, 문자열 타입 검증
z.number().min(0); // 최소값 0, 숫자 타입 검증
z.boolean(); // true 또는 false
z.array(z.string()); // 배열 타입 검증, 문자열 배열
z.union([z.string(), z.number()]); // 여러 타입 중 하나를 허용, 문자열 또는 숫자
z.null(); // null 타입 검증
z.undefined(); // undefined 타입 검증
z.literal("hello"); // 특정 값만 허용
z.object({...}); // 객체 타입 검증
z.record(z.string()); // 키-값 쌍의 객체 검증, 키는 문자열, 값은 문자열인 객체
const result = schema.parse(data); // 주어진 데이터가 정의된 스키마에 맞는지 검증, 실패할 경우 예외를 던지며, 오류 메시지를 포함한다.
const result = schema.safeParse(data);
if(!result.success) {
console.error(result.error) // 오류 처리
} // 검증 결과를 객체 형태로 반환하며, 성공 여부를 명시한다. 오류가 발생해도 예외를 던지지 않고, 오류 메시지를 포함한 결과를 제공한다.
const schema = z.string().refine((value) => value.includes('@'), {
message: "Email must contain "@"",
}); // 특정 조건을 만족해야 하는지를 검증한다. 조건이 충족되지 않으면 오류 메시지를 반환한다.
const schema = z.string().transform((val) => val.trim()); // 입력 값을 변환하면서 동시에 검증을 수행한다. 주로 값을 정제하거나 형식을 변경할 때 사용한다.
const userSchema = z.object({
name: z.string(),
age: z.number(),
});
// 타입 추론
type User = z.infer<typeof userSchema>;
// User는 { name: string; age: number; } 타입이 된다.
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
name: "",
},
});resolver는 react-hook-form에서 사용되는 개념으로, 폼 유효성 검사 로직을 정의하는 함수이다.
여기서 zodResolver는 Zod 스키마를 react-hook-form과 통합하기 위한 특별한 resolver이다.
resolver의 동작 순서
- 사용자가 폼을 제출하려고 한다.
- react-hook-form이 resolver 호출 이때 zodResolver(formSchema)가 실행된다.
- zodResolver는 입력된 데이터를 formSchema와 비교한다. 예를 들어, name 필드가 비었는지 확인한다.
- 유효한 경우 검증된 데이터를 반환하고 그렇지 않은 경우 에러 정보를 반환한다.
resolver는 마치 문지기와 같다. 폼 데이터가 제출되려고 할 때 문지기가 데이터를 검사한다. 규칙에 맞으면 통과시키고, 그렇지 않으면 거부하며 무엇이 잘못인지 알려준다.
왜 ZOD를 사용하는지?
TypeScript와의 통합
- 완벽하게 통합되어 타입 추론이 자동으로 이루어진다.
런타입 타입 체크
- 컴파일 시간과 런타임 모두에서 타입 체크를 제공한다.
간결한 문법
- 선언적이고 읽기 쉬운 문법을 제공한다.
react-hook-form과의 쉬운 통합
- 위와 같은 resolver 같이 통합하기 쉬운 경우가 많다.
'왜?'