[Zod] Method

Before you learn

공식 사이트

Method

자주 사용되는 Method를 정리해서 기록하였습니다.

[.string]

const formSchema = z
  .object({
    username: z
      .string({
        invalid_type_error: "Invalid Username",
        required_error: "Username is required",
      })
   })

invalid_type_error : 유효하지 않은 경우, 에러를 발생합니다.

required_error : 입력하지 않으면 에러를 발생합니다.

[.min]

const formSchema = z
  .object({
    username: z
      .min(3, "Must be at least 3 characters")
  })

최소 길이를 정합니다.

최소 길이보다 작은 경우, 에러를 발생합니다.

[.max]

const formSchema = z
  .object({
    username: z
      .max(10, "Must be less than 10 characters")
  })

최대 길이를 정합니다.

최대 길이보다 큰 경우, 에러를 발생합니다.

[.refine]

const passwordForm = z
  .object({
    password: z.string(),
    confirm: z.string(),
  })
  .refine((data) => data.password === data.confirm, {
    message: "Passwords don't match",
    path: ["confirm"],
  });

특정 조건에 따라 true, false를 리턴합니다.

false인 경우, 에러를 발생합니다.

path는 해당 에러를 보여줄 장소를 정합니다.

[.superRefine]

const formSchema = z
  .object({
    password: z
    confirm_password: z
  })
  .superRefine(({ password, confirm_password }, ctx) => {
    if (password !== confirm_password) {
      ctx.addIssue({
        code: "custom",
        message: "Two passwords should be equal",
        path: ["confirm_password"],
      });
    }
  });

refine에서 다양한 지원을 하는 메서드입니다.

[.regax]

const passwordRegex = new RegExp(
  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*?[#?!@$%^&*-]).+$/
);

const formSchema = z
  .object({
    password: z
      .regex(
        passwordRegex,
        "A password must have lowercase, UPPERCASE, a number and special characters."
      ),
  })

정규표현식으로 데이터 검증을 할 수 있습니다.

[.toLowerCase]

const formSchema = z
  .object({
    username: z
      .string()
      .toLowerCase()
  })

String 타입의 데이터를 모두 소문자로 변환해 줍니다.

[.toUpperCase]

const formSchema = z
  .object({
    username: z
      .string()
      .toUpperCase()
  })

String 타입의 데이터를 모두 대문자로 변환해 줍니다.

[.trim]

const formSchema = z
  .object({
    username: z
      .string()
      .trim()
  })

String 타입의 데이터에서 맨 앞과 맨뒤에 붙은 공백을 제거해 줍니다.

[.transform]

const formSchema = z
  .object({
    username: z
      .string()
      .transform((username) => `🔥 ${username} 🔥`)
  })

데이터를 변환시킬 수 있습니다.

[.parse]

data의 타입이 유효한지 검사하기 위해 .parse 메서드를 사용할 수 있습니다.

유효한 경우, 데이터 전체 정보가 포함된 값이 반환됩니다.

유효하지 않은 경우, 에러를 throw 합니다. (Zod 에러창 발생함)

parse를 사용하면 항상 try-catch문을 사용해야 합니다.

"use server";
import { z } from "zod";

const formSchema = z.object({
  username: z.string().min(3).max(10),
  email: z.string().email(),
  password: z.string().min(10),
  confirm_password: z.string().min(10),
});

export async function createAccount(prevState: any, formData: FormData) {
  const data = {
    username: formData.get("username"),
    email: formData.get("email"),
    password: formData.get("password"),
    confirm_password: formData.get("confirm_password"),
  };
  
  try{
    formSchema.parse(data);
    console.log(data)
  } catch (e) {
    console.log(e)
  }
}

// 성공한 경우, console.log(data)
{
  username: 'qwer',
  email: 'qwer@qwer.qwer',
  password: 'qwerqwerqwer',
  confirm_password: 'qwerqwerqwer'
}


// 실패한 경우, console.log(e)
{
  issues: [
    {
      code: 'too_small',
      minimum: 10,
      type: 'string',
      inclusive: true,
      exact: false,
      message: 'String must contain at least 10 character(s)',
      path: [Array]
    }
  ],
  addIssue: [Function (anonymous)],
  addIssues: [Function (anonymous)],
  errors: [
    {
      code: 'too_small',
      minimum: 10,
      type: 'string',
      inclusive: true,
      exact: false,
      message: 'String must contain at least 10 character(s)',
      path: [Array]
    }
  ]
}

[.safeParse]

유효성 검사를 실패해도 에러를 throw 하지 않습니다. (Zod 에러창 발생하지 않음)

데이터가 유효한 경우, true 값의 success와 데이터 정보가 담긴 data를 반환합니다.

유효하지 않은 경우, false 값의 success와 에러 정보가 담긴 error를 반환합니다.

"use server";
import { z } from "zod";

const formSchema = z.object({
  username: z.string().min(3).max(10),
  email: z.string().email(),
  password: z.string().min(10),
  confirm_password: z.string().min(10),
});

export async function createAccount(prevState: any, formData: FormData) {
  const data = {
    username: formData.get("username"),
    email: formData.get("email"),
    password: formData.get("password"),
    confirm_password: formData.get("confirm_password"),
  };
  
  const result = formSchema.safeParse(data);
  console.log(result);
}

// console.log(result)

// 성공인 경우
{
  success: true,
  data: {
    username: 'qwer',
    email: 'qwer@qwer.qwer',
    password: 'qwerqwerqwer',
    confirm_password: 'qwerqwerqwer'
  }
}

// 실패인 경우
{success: false, error: [Getter]}

[.flatten]

safeParse에 flatten을 사용하면 에러 메시지만 뽑아서 사용할 수 있다.

해당 메시지를 활용하여 console.log가 아닌 화면에 보여줄 수 있다.

여러 개의 데이터를 넣은 Schema Object에서 검사하여 에러가 발생한 경우,

fieldErrors에 에러 값이 들어가고,

하나의 데이터만 넣은 Schema에서 검사하여 에러가 발생한 경우,

formErrors에 에러 값이 들어간다.

"use server";
import { z } from "zod";

const formSchema = z.object({
  username: z.string().min(3).max(10),
  email: z.string().email(),
  password: z.string().min(10),
  confirm_password: z.string().min(10),
});

export async function createAccount(prevState: any, formData: FormData) {
  const data = {
    username: formData.get("username"),
    email: formData.get("email"),
    password: formData.get("password"),
    confirm_password: formData.get("confirm_password"),
  };
  
  const result = formSchema.safeParse(data);
  if (!result.success) {
    console.log(result.error.flatten());
  }
}

// console.log(result.error.flatten());
{
  formErrors: [],
  fieldErrors: {
    confirm_password: [ 'String must contain at least 10 character(s)' ]
  }
}

[.coerce]

값의 타입을 강제 변환시킵니다.

import { z } from "zod";

z.coerce.string(); // String(input)
z.coerce.number(); // Number(input)
z.coerce.boolean(); // Boolean(input)
z.coerce.bigint(); // BigInt(input)
z.coerce.date(); // new Date(input)

저작자표시 비영리 변경금지