🧸Zod란 ??

zod 는 스키마 선언 및 유효성 검사 라이브러리이다.
zod 와 비슷한 역할을 하는 라이브러리로는 joi , yup , typia 등이 있다.
기본적으로 zod 는 TypeScript 를 기반으로 하지만 , TypeScript와 JavaScript 개발 환경에서 모두 사용 할 수 있다.

공식문서에서 주장하는 이점으로는 다음과 같다.

• Zero dependencies => 의존성이 없음
• Works in Node.js and all modern browsers => Node.js 및 모든 최신 브라우저에서 작동
• Tiny: 8kb minified + zipped => 데이터 8kb 축소 + 압축됨
• Immutable: methods (e.g. .optional()) return a new instance => 메소드들 새로운 인스턴스 반환
• Concise, chainable interface. => 간결하고 연결가능한 인터페이스 제공
• Functional approach: parse, don't validate
• Works with plain JavaScript too! You don't need to use TypeScript. => 자바스크립트 랑 타입스크립트 둘다 사용가능

🧸Zod 사용하기전 설치해야할것들!

• zod 설치

npm install zod       # npm
yarn add zod          # yarn
bun add zod           # bun
pnpm add zod          # pnpm

• 리액트훅폼 & resolvers 설치

npm i react-hook-form
npm i @hookform/resolvers

import { z } from "zod";

(위와 같이 z 를 통해서 Zod의 기능을 활용할수 있다.)

그럼 이제 본격적으로 zod를 사용해서 유효성 검사를 해보자!
많은 벨로그에 다 타입스크립트 를 활용하여 zod를 사용하셨길래 나는 꿋꿋하게 자바스크립트 로 사용해보겠다.

🧸Zod 라이브러리 사용법

⚙️Schema 설정

우선 유효성 검사를 하려면 입력 폼에 대한 스키마를 작성해줘야한다.
(yup 사용시에도 필요하다.)

재사용성 및 코드 수정 편의를 위해 Schema 컴포넌트를 따로 빼서 아래와 같이 작성했다.

import { z } from "zod";

export const Schema = z.object({
    email: z
        .string()
        .email({ message: "이메일 양식이 올바르지 않습니다" })
        .min(1, { message: "ID를 입력해주세요" })
        .optional(),

    password: z
        .string()
         //regex: 문자열이 주어진 정규식 패턴과 일치하는지 검증
        .regex(/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).*$/, {
            message: "대소문자, 숫자, 특수문자를 하나 이상 포함해 주세요",
        })
        .min(8, { message: "8글자 이상 입력해주세요" })
        .optional(),
});

아마 Yup 을 사용해보았더라면 매우 비슷하다는것을 알 수 있을것이다.
약간의 메서드만 다르다.
Object() 로 객체 형식의 스키마를 정의한다. 이 메서드를 사용하여 객체의 구조, 필드, 각 필드의 유효성검증 조건을 정의할 수 있다.

또한 코드에서 보이는 optional() 메서드는 필드가 필수가 아니라 선택사항이라고 명시해주는것이다.

예를 들어 아래와 같은 스키마를 작성했다고 하면,

z.object({
    name: z.string().optional(),
    age: z.number().optional(),
});

name과 age 필드는 문자열/숫자 형식이며 선택적이다. 즉 이 필드가 없거나 문자열/숫자 이(가) 아니더라도 스키마는 유효함을 명시해주는것이다.
즉, 선택적 필드는 해당 필드가 없어도 전체 스키마의 유효성을 방해하지 않는다.

따라서 이 스키마를 기반으로 데이터를 검증할 때 다음과 같은 상황들이 가능하다.

• {} (빈 객체): name과 age 필드가 모두 없으므로 유효.
• { "name": "John" }: name은 유효한 문자열 값을 가지고 있고, age는 없으므로 유효.
• { "age": 30 }: age는 유효한 숫자 값을 가지고 있고, name은 없으므로 유효.
• { "name": 123, "age": "thirty" }: name은 유효하지 않은 숫자 값이지만 선택적이므로 전체 스키마는 여전히 유효.

❗✋같은 Schema인 Yup 이랑 코드가 뭐가 다를까?!

비교를 위해 아래는 Yup 으로 쓴 스키마를 첨부한다.

import * as yup from "yup";

const schema = yup.object({
    email: yup
        .string()
        .email("이메일 양식이 올바르지 않습니다")
        .required("ID를 입력해주세요"),
    password: yup
        .string()
        .matches(
            /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).*$/,
            "대소문자, 숫자, 특수문자를 하나 이상 포함해 주세요"
        )
        .min(8, "8글자 이상 입력해주세요")
        .required("비밀번호를 입력해주세요"),
});

export default schema;

⚙️ZodComponent 생성

위와 같이 스키마를 작성했다면 이제 직접 써볼 차례이다.
CSS 를 뒤로 재쳐두고, 간단하게 사용해보겠다.
우선 Zod컴포넌트를 따로 생성했다.

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Schema } from "./Schema";

const ZodComponent = () => {
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm({
        resolver: zodResolver(Schema),
    });

    const onSubmit = (data) => {
        console.log(data);
    };
    //유효성 검증 parse 사용해봄
    Schema.parse({
        email: "123123@test.test",
        password: "1231231Edd@23",
    });
    return (
        <>
            <form onSubmit={handleSubmit(onSubmit)}>
                <h2>ZodComponent</h2>
                <input
                    placeholder="이메일을 입력하세요"
                    {...register("email")}
                />
                {errors.email && <p>{errors.email.message}</p>}
                <input
                    placeholder="비밀번호를 입력하세요"
                    {...register("password")}
                />
                {errors.password && <p>{errors.password.message}</p>}
                <button>Submit</button>
            </form>
        </>
    );
};

export default ZodComponent;

이렇게 작성한 후 메인페이지에 ZodComponent를 import 하여 불러오면,

와 같이 뜨고, 양식이 올바르지 않는다면

양식이 올바르다면

에러 메세지가 사라지는것을 볼수 있다.
Yup 과 똑같다.

이 외에도 Zod 에는 다양한 메소드들과 요소들이 있다.
간단하게 알아보자.

⚙️Zod의 대표적인 메소드와 요소들

🔧Parse 메소드

Zod에는 유효성 검증을 할 수 있는 메소드가 있다.

    Schema.parse({
        email: "123123test.test",
        password: "1231231Edd@23",
    });

이렇게 작성했을때 email의 스키마가 해당 형식이 아니므로 localhost 에는 error가 뜬다.

근데 형식을 맞춰서 작성하면

    Schema.parse({
        email: "123123@test.test",
        password: "1231231Edd@23",
    });

에러는 사라지고 화면은 잘 뜬다.

🔧safeParse 메소드

parse 메소드를 사용해서 오류를 발생하게 했다면,
safeParse 메소드는 검증 실패시 Zod가 오류를 발생하지 않게 해주는 대신 검증문제에 대해 정보가 포함된 ZodError인스턴스를 포함하는 객체를 반환한다.

    const data = {
        email: "123123test.test",
        password: "1231231Edd@23",
    };
    const temp = Schema.safeParse(data);
    if (!temp.success) {
        console.error(temp.error);
    }

이렇게 작성하면 ,

위 사진과 같이 콘솔창에 zodError가 뜨고, 형식을 맞춰 작성하면 사라진다.

🔧Zod의 다양한 요소들

• .Shape
  .shape특정 키에 대한 스키마에 액세스하는 데 사용
• .passthrough
  스키마 구문 분석 중 인식 할 수 없는 키를 통과함
• .strict
  입력에 알 수 없는 키가 있으면 Zod는 오류를 발생시킴
• .extend
  메소드를 사용하여 객체 스키마에 추가 필드를 추가할 수 있음

🥹마치며

Yup 을 공부하면서 Zod 라이브러리도 같은 기능을 한다는것을 알게되었고,
이번 주제는 "Zod 라이브러리 파헤치기" 로 잡았다.
꾸미는거는 다 생략하고 아주 간단하게 만들어봤는데, 공식문서를 다 참고하고 에러가 어떻게 뜨는지 다 사용해보면서 만들어보니 시간은 많이 소요됐지만 잘 이해됐던거 같다.
암튼 질 좋은 공부가 된것같아 뿌듯 -✨