📁 zod 도입하기

분야	작성자	작성일
FE	조배경	24년 11월 24일

현재 프로젝트에서는 API 명세에 따라 request/response 타입을 따로 작성해둔 상태이다.

export interface GetStockListRequest {
  limit: number;
}

export interface GetStockListResponse {
  id: string;
  name: string;
  currentPrice: number;
  changeRate: number;
  volume: number;
  marketCap: string;
}

이는 컴파일 과정에서는 오류 발생 시 잡아낼 수 있지만, 런타임 시에는 타입정보가 제거되어 확인할 수 없다.

타입검사는 컴파일 시점에서 일어나며, 타입스크립트가 런타임 시 유효성 검증까지 해주지 못한다. 즉, 타입 검사가 유효성 검증을 대신할 수 없다.

런타임 시점에 예측할 수 없는 동작까지 통제하기 위해서는 유효성 검증 로직이 필요하다.

이를 쉽게 도와주기 위해서 zod 라이브러리를 도입하기로 했다.

스키마를 정의하고, 이를 통해 타입 추론 및 유효성 검증을 할 수 있는 점이 매력적으로 느껴졌다.

사용법

설치

우리 프로젝트는 yarn을 사용하고 있다.

yarn add zod

스키마 정의

import { z } from 'zod';

export const GetStockResponseSchema = z.object({
  marketCap: z.number(),
  eps: z.number(),
  per: z.number(),
  high52w: z.number(),
  low52w: z.number(),
});

주식 상세 정보를 받아오는 get 요청에 대한 응답 스키마를 정의했다.

z.number()에는 .min(), .max(), .postive(), nonnegative(), negative(), nonpositive(), finite() 등을 체이닝으로 추가로 지정할 수 있다. 또한 z.bigint()도 동일하게 가능하다.

export const GetLoginStatusSchema = z.object({
  message: z.enum(['Authenticated', 'Not Authenticated']),
});

위와 같이 z.enum()으로도 지정할 수 있다.

export const ChatDataSchema = z.object({
  id: z.number(),
  likeCount: z.number(),
  message: z.string(),
  type: z.string(),
  createdAt: z.date(),
  liked: z.boolean(),
  nickname: z.string(),
});

export const ChatDataResponseSchema = z.object({
  chats: z.array(ChatDataSchema),
  hasMore: z.boolean(),
});

z.array()를 통해 배열 스키마를 지정할 수 있다.

타입 추론

export type GetStockResponse = z.infer<typeof GetStockResponseSchema>;

z.infer를 통해 위에서 정의한 스키마로 타입을 정의할 수 있다.

VSC 상에서도 타입추론이 되는 것을 확인할 수 있다.

유효성 검증

.parse

const validatedData = GetStockResponseSchema.parse(data);

검증하려는 데이터를 parse에 넘겨서 호출하면 유효성 검증을 할 수 있으며 검증에 실패한다면 에러가 발생한다.

.safeParse

  const result = schema.safeParse(data);

  if (!result.success) {
	  // handle error then return
    result.error
  }

유효성 검증에 실패했을 때 에러를 던지고 싶지않다면 safeParse를 사용한다.

safeParse의 리턴값으로는 { success: true; data: T; } | { success: false; error: ZodError; }를 받아 처리할 수 있다.

참고자료

zod로 유효성 검증과 타입 선언의 두마리 토끼 잡기

타입스크립트를 쓰는데도 유효성 검증이 필요할까?

zod 공식문서

Mastering Zod Validation in React: A Comprehensive Guide