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

Zod 에 대해서

Zod 정의

Zod 란 무엇일까?

 

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

Zod 의 목표는 유형 선언의 중복을 제거하는 것이며, Zod 을 사용하면 한 번 유효성 검사기를 선언하고

Zod 이 정적 TypeScript 유형을 자동으로 추론한다

[출처] 공식문서

GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference

 

Zod 장점

공식문서에 따르면 장점은 다음과 같다.

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

 

Zod 사용 방법

간단하게 Zod 사용법에 대해 알아 볼 것이다. (타입스크립트 환경 React 프로젝트에서 사용하는 중)

 

세팅하기

먼저 터미널 창에 명령어를 입력하여 Zod 를 설치한다.

npm install zod

그리고 tsconfig.json 에서 strict 값이 true 가 되어야 한다.

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

그러면 이제 Zod 를 사용할 준비가 끝났다.

 

간단한 사용법

먼저 Zod 를 import 하고

import { z } from 'zod';

원하는 형식의 스키마를 만들어준다. 나는 string 형태의 스키마를 생성하였다.

const mySchema = 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));

추가적으로 복잡한 형태는 다음과 같이 표현한다.

const User = z.object({
  username: z.string(),
});

 

사용 이유

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

그 밖에 Zod 를 통해 유효성 검사 할 수 있는 내용은 [Zod 공식 문서]에서 자세하게 확인할 수 있다.

 

Zod 와 React-Hook-Form

Zod 를 React 에서 사용할 땐 react-hook-form 과 같이 사용하면 좋다고 한다.

 

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

(만약 react-hook-form 을 잘 모른다면 해당 블로그 에서 내용을 확인할 수 있다.)

 

세팅하기

@hookform/resolvers 를 터미널 창에서 설치한다.

npm install @hookform/resolvers

필요한 라이브러리들을 import 해준다.

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 으로 입력 폼 작성

작성한 스키마를 바탕으로 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 을 사용해서 입력 폼 작성하는 것을 알아보았다.

 

---

참고

[Zod 공식 문서]
[React-Hook-Form 공식문서]

Zod enum 타입 error message 변경 방법