Zod와 React Hook Form을 사용한 유효성 검사(feat. React)

Zod와 React Hook Form을 사용한 유효성 검사

Zod는 타입스크립트에서 유효성 검사를 위해 사용되는 스키마 선언 및 유효성 검사 라이브러리입니다. 이는 타입스크립트가 컴파일 과정에서 타입을 검증할 수는 있지만, 실제 프로그램이 실행될 때는 아무런 역할을 하지 않는 한계를 극복하기 위해 만들어졌습니다. 이를 통해 API로부터 들어오는 데이터를 검증하고, 예상하지 못한 데이터나 오류로부터 프로그램을 보호할 수 있습니다.

Zod와 React Hook Form의 통합 과정

Zod 기본 사용법

먼저, z.object()로 스키마를 선언하고 각 필드의 타입과 규칙을 정의할 수 있습니다. 이렇게 정의된 스키마는 타입을 추론할 수 있고, 이 스키마로부터 생성된 데이터는 검증을 통해 유효한지 확인할 수 있습니다.

import { z } from "zod";

// 스키마 정의
const Man = z.object({
  name: z.string(),
  height: z.number(),
  age: z.number(),
  phoneNum: z.string(),
  homePhoneNum: z.string().optional(),
  isCompletedMilitaryService: z.boolean(),
});

// 스키마로부터 타입 추론
type ManType = z.infer<typeof Man>;

const processMan = (man: ManType) => {
  Man.parse(man); // 유효성 검사
};

// 사용처 처리 로직

 

위 코드는 Man이라는 객체 스키마를 정의하고, 해당 스키마에 맞는 데이터를 parse 메서드를 통해 검증하는 과정입니다. 만약 데이터가 정의된 규칙에 맞지 않는다면, 오류가 발생하게 됩니다.

Zod와 React Hook Form의 통합

react-hook-form은 비제어 컴포넌트를 사용하면서 폼 데이터를 쉽게 처리할 수 있는 라이브러리입니다. 이를 Zod와 결합하면, 스키마를 기반으로 폼 데이터의 유효성을 실시간으로 검증할 수 있습니다.

Zod와 React Hook Form의 통합 예시

다음은 Zod를 react-hook-form과 통합하여 폼 유효성 검사를 하는 코드입니다.

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

// 스키마 정의
const schema = z.object({
  name: z.string().min(1, { message: '이름이 있어야 합니다.' }),
  email: z.string().email({ message: '이메일 형식이 올바르지 않습니다.' }),
});

const InputSample = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schema), // Zod 스키마를 resolver로 사용
  });

  const onSubmit = handleSubmit((data) => console.log(data));

  return (
    <div className="flex w-full justify-center">
      <div className="w-1/2 border border-slate-500 bg-slate-300 p-10">
        <form onSubmit={onSubmit}>
          <div className="grid w-full max-w-sm items-center gap-2">
            <LabeledInput name="name" register={register} errors={errors} />
            <LabeledInput name="email" register={register} errors={errors} />
          </div>
          <input type="submit" />
        </form>
      </div>
    </div>
  );
};

export default InputSample;

import { ErrorMessage } from '@hookform/error-message';
import { Input } from './Input';

const LabeledInput = ({ name, register, ...props }: any) => {
  return (
    <div>
      <Input placeholder={name} {...register(name)} />
      <ErrorMessage errors={props.errors} name={name} />
    </div>
  );
};

export default LabeledInput;

이 코드에서는 Zod 스키마를 zodResolver로 설정하여 react-hook-form과 통합하였습니다. 이를 통해 사용자가 폼을 제출할 때 실시간으로 스키마에 따른 유효성 검사가 이루어집니다.

주요 포인트

1. 스키마 선언: Zod를 통해 폼 필드의 규칙을 정의합니다. 예를 들어, 이름은 필수 입력값이고, 이메일은 이메일 형식이어야 합니다.
2. ZodResolver: useForm에서 zodResolver를 사용하여 Zod 스키마와 폼을 연결합니다.
3. 에러 처리: 폼 필드별로 ErrorMessage를 통해 발생한 에러를 표시할 수 있습니다.

결론

Zod와 React Hook Form의 결합은 타입스크립트 기반 애플리케이션에서 강력하고 안전한 유효성 검사를 제공합니다. 이를 통해 사용자 입력을 더욱 신뢰성 있게 처리할 수 있으며, 간결하고 직관적인 코드를 유지할 수 있습니다.