Zod란,

데이터를 검증(Validation)하고, 데이터의 구조와 타입을 정의하기 위한 스키마 기반 검증 도구야.
쉽게 말해, 데이터를 체크리스트에 따라 검사해주는 "검문관" 같은 역할을 하는거지.

📍핵심 설명

• Zod는 데이터를 검증하는 도구야.
  입력된 데이터가 올바른지 확인하는 체크리스트(스키마)를 작성하고, 데이터를 그 규칙에 따라 검증해. (예시)
  • 회원가입 폼: 이름은 필수 입력값이고, 최소 2글자 이상. 이메일은 올바른 형식.
  • API 응답 데이터 검증: 서버에서 가져온 데이터가 내가 원하는 형식인지 확인.
  • 숫자 입력값 검증: 숫자는 반드시 양수여야 하고, 특정 범위에 들어와야 함.

🔍 Zod 사용 예제

1️⃣ Zustand 설치

패키지 매니저	설치 명령어
Yarn	yarn add zod
pnpm	pnpm add zod

2️⃣ Zod 스키마 생성
Zod 스키마를 생성해 데이터를 검증할 규칙을 정의.

import { z } from 'zod';

// Zod 스키마 정의
const userSchema = z.object({
  name: z.string().min(2, "이름은 최소 2글자 이상이어야 합니다."),
  age: z.number().min(0, "나이는 0 이상이어야 합니다."),
  email: z.string().email("올바른 이메일 형식이 아닙니다."),
});

3️⃣ 데이터 검증
정의된 스키마를 사용해 데이터를 검증.

const userData = {
  name: "Alice",
  age: 25,
  email: "alice@example.com",
};

const result = userSchema.safeParse(userData);

if (result.success) {
  console.log("데이터가 유효합니다!", result.data);
} else {
  console.error("데이터가 유효하지 않습니다!", result.error.errors);
}

🙌 위의 코드를 더 이해해보기.

• result.success가 true라면 데이터가 스키마에 맞음.
• result.success가 false라면 검증에 실패하고, 어떤 규칙이 어긋났는지 error.errors에 상세 정보가 나옴.

4️⃣ Zod와 React Hook Form 통합 예제
React Hook Form과 Zod를 결합해 폼 데이터를 검증하는 예제.

import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';

// Zod 스키마 정의
const schema = z.object({
  username: z.string().min(3, "이름은 최소 3글자 이상이어야 합니다."),
  email: z.string().email("유효한 이메일을 입력해주세요."),
  password: z.string().min(6, "비밀번호는 최소 6글자 이상이어야 합니다."),
});

const App = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schema), // Zod 스키마를 React Hook Form에 연결
  });

  const onSubmit = (data) => {
    console.log("폼 데이터:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>이름</label>
        <input {...register("username")} />
        {errors.username && <p>{errors.username.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 App;

🔍 자주 사용되는 패턴(간략)

• Zod로 체크리스트 작성하기

1️⃣ 체크리스트 정의(스키마 작성)

import { z } from "zod";
const schema = z.object({
  name: z.string().min(1, "이름은 필수입니다!"), // 이름은 문자형이고, 최소 1자 이상이어야 함
  age: z.number().min(0, "나이는 0 이상이어야 합니다!"), // 나이는 숫자이고, 0 이상이어야 함
  email: z.string().email("유효한 이메일을 입력해주세요!"), // 이메일은 형식이 맞아야 함
});

2️⃣ 데이터 검사

const data = {
  name: "Alice",
  age: 25,
  email: "alice@example.com",
};
const result = schema.safeParse(data);
if (result.success) {
  console.log("데이터가 유효합니다!", result.data);
} else {
  console.log("데이터가 잘못되었습니다!", result.error.errors);
}

🔍 자주 사용되는 패턴(예시)

• 온라인 회원가입

1️⃣ 회원가입 스키마 작성

const signupSchema = z.object({
  username: z.string().min(3, "이름은 최소 3글자 이상이어야 합니다."),
  password: z.string().min(6, "비밀번호는 최소 6글자 이상이어야 합니다."),
  email: z.string().email("유효한 이메일 주소를 입력해주세요."),
});

2️⃣ 회원가입 데이터 검사

const formData = {
  username: "Al",
  password: "12345",
  email: "wrong-email-format",
};

const result = signupSchema.safeParse(formData);

if (!result.success) {
  console.log("검증 실패! 에러 내용:", result.error.errors);
  /*
  결과:
  [
    { message: "이름은 최소 3글자 이상이어야 합니다.", path: ["username"] },
    { message: "비밀번호는 최소 6글자 이상이어야 합니다.", path: ["password"] },
    { message: "유효한 이메일 주소를 입력해주세요.", path: ["email"] },
  ]
  */
}

🚀 진짜 쉬운 설명

• Zod는 데이터를 검증하는 도구야.
  "이 데이터가 내가 원하는 조건에 맞는지?"를 검사를 해.

• 스키마(Schema)는 데이터의 조건을 정의한 체크리스트야.
  "이름은 꼭 있어야 해!", "숫자는 0 이상이어야 해!" 같은 규칙을 작성해.

• Zod의 역할
  스키마를 기준으로 데이터를 검사하고, 틀리면 어떤 부분이 잘못되었는지 알려줘.

  • Zod를 사용하는 경우 체크리스트를 미리 작성해 두면,
    • "이름은 꼭 있어야 해!" → 이름이 없으면 에러.
    • "가격은 숫자로 알려줘야 해!" → 텍스트로 된 가격은 에러.
    • "갯수는 최소 1개 이상이어야 해!" → 0개면 에러.

결국, Zod는 체크리스트(스키마)를 기반으로 데이터를 올바르게 확인하고, 문제가 있으면 알려주는 도구야.

---

✏️ 더 알아가기

• 스키마란?
  데이터를 확인하기 위한 "체크리스트"야.

  • 쉽게 비유하기 : 내가 친구에게 "이런 물건을 사 와줘!"라고 부탁한다고 생각해봐.
  • 체크리스트(스키마)
  • "물건 이름은 무엇인지?" (문자열)
  • "가격은 얼마인지?" (숫자)
  • "갯수는 몇 개인지?" (숫자, 1 이상)
  • 친구가 이 조건에 맞지 않는 데이터를 가져오면, "틀렸어, 다시 해!"라고 알려줄 수 있어.
    Zod에서는 이런 체크리스트(스키마)를 작성하고, 데이터를 검사하는 역할을 해.