[React] Zod로 React-Hook-Form 유효성 검증

 

 

Zod란 뭘까?

TypeScript 기반의 스키마(데이터 유형) 선언 및 유효성 검사 라이브러리

 

Zod 의 목표는 유형 선언의 중복을 제거하는 것이며, Zod 을 사용하면 한 번 유효성 검사기를 선언하고 Zod 이 정적 TypeScript 유형을 자동으로 추론한다 - Zod -

 

[공식문서]

Intro | Zod

 

Zod의 장점

• 의존성 없음
• Node.js 및 모든 최신 브라우저에서 작동
• 작음: 8kb 압축 후 크기
• 불변성 유지: 메서드 (예: .optional())는 새 인스턴스를 반환합니다.
• 기능적 접근: 구문 검사, 유효성 검사하지 않음
• 일반 JavaScript에서도 작동합니다! TypeScript를 사용할 필요가 없습니다.

 

Zod 사용방법

설치

npm install zod

yarn add zod

 

tsconfig.json의 strict는 true여야 함

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "strict": true,
}

 

사용방법

원하는 형식의 스키마 생성

import { z } from 'zod';

const mySchema = z.string();

+) 복잡한 형태는
const User = z.object({
  username: z.string(),
});

 

parse를 통해 검증할 수 있고 올바른 형태면 검증한 내용을 반환하고 그렇지 않으면 throws Error 를 한다.

console.log(mySchema.parse('hello'));
console.log(mySchema.parse(12));

 

 

추가로 safeParse 를 사용하면 error 를 throw 하지 않고 객체 형태로 성공 여부를 알려준다.

console.log(mySchema.safeParse('hello'));
console.log(mySchema.safeParse(12));

 

 

사용이유

React 프로젝트에서 form 을 구현할 때 Zod 를 사용한다면 입력 값의 유효성 검사를 하는데 좀 더 간편하고 쉬울 것이다. 

[공식문서] - 공식문서에 더 자세한 설명있음

Intro | Zod

 

Zod와 React-hook-form을 같이 사용하면 더 좋다고 한다.

• react-hook-form 으로 form 들을 관리하고 특정 form 들에 매핑되어야 하는 값의 유효성 검사를 Zod 가 해주면 효과적인 입력 값 검증을 하기 때문

 

설치

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

yarn add react-hook-form
yarn add @hookform/resolvers

 

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

 

스키마 작성

입력 폼에 대한 스키마를 작성한다.

아래 스키마는 name 과 age 필드를 가지며, name 은 string(문자열) 이면서 최소 길이가 한글자 이상이어야 한다.
만약 한글자 이상 조건을 만족하지 않으면 '이름은 필수값입니다.' 라는 메시지가 표시된다.

age 는 number(숫자) 이면서 숫자를 입력하지 않을 경우 메시지를 표시하고,
나이가 최소 1 이상이어야 하며 그렇지 않으면 메시지가 표시되도록 스키마 객체를 생성하였다.

 

const schema = z.object({
  name: z.string().min(1, { message: '이름은 필수값입니다.' }),
  age: z
    .number({
      invalid_type_error: '나이는 필수값입니다.',
    })
    .min(1, { message: '나이는 1살부터 입력이 가능합니다.' }),
});

 

작성한 스키마를 바탕으로 React-Hook-Form 를 사용하여 입력 폼을 작성한다.

const Zod = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schema),
    defaultValues: {
      name: '',
      age: '',
    },
  });

  return (
    <form onSubmit={handleSubmit((e) => console.log(e))}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          type="text"
          id="name"
          placeholder="이름을 입력해주세요."
          {...register('name')}
        />
        {errors.name && <p>{errors.name.message}</p>}
      </div>

      <div>
        <label htmlFor="name">Age</label>
        <input
          type="number"
          id="age"
          placeholder="나이를 입력해주세요."
          {...register('age', { valueAsNumber: true })}
        />
        {errors.age && <p>{errors.age.message}</p>}
      </div>
      <input type="submit" />
    </form>
  );
};

 

아무런 내용을 입력하지 않고 제출 버튼을 누르면 아래와 같은 메시지가 뜨며

 

나이를 1 이하로 적었을 경우 아래와 같은 메시지가 뜨게 된다.

 

 

이렇게 해서 Zod 와 React-Hook-Form 을 사용해서 입력 폼 작성하는 것을 알아보았다.