안녕하세요!

Zod와 React Hook Form에서 제공하는 여러가지 유틸리티 훅들을 사용해 폼을 맛있게 다루어보는 방법에대해 작성해보았습니다 !

1️⃣ 리훅폼과 Zod를 통한 유효성 검증

기본적으로 리훅폼은 HTML속성 기반 검증을 지원하지만, 더 복잡한 유효성 검증이나 커스텀 로직을 적용하려면 외부 검증 라이브러리를 사용해야 한다. 그래서 일반적으로 zod, yup, joi 같은 유효성 검증 라이브러리와 함께 사용한다면! 더욱 큰 시너지를 낼 수 있다.

그 중에서도 Zod는 TypeScript와 강력한 통합을 목표로하는 선언적 라이브러리이며 최근 가장 많이 쓰이고있다.

<aside> 💡

Zod란 ?

JS, TS에서 스키마 유효성 검증 및 데이터 파싱을 위한 라이브러리

주로 데이터를 정의하고, 유효성 검사를 실행하며 React Hook Form과 같은 라이브러리와 결합하여 데이터 검증기능을 제공한다.

</aside>

리훅폼에서 Zod를 사용하기 위해서는 리훅폼에서 제공하는 별도의 유틸리티 패키지인 hookform/resolvers를 설치해줘야한다.

hookfrom/resolvers는 다양한 유효성 검사 라이브러리와 리훅폼의 통합을 지원해주는 라이브러리다.

⚙️ 적용해보기

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

const userSchema = z.object({
  username: z.string().min(3, "이름은 최소 3자 이상이어야 합니다."),
  password: z.string().min(6, "비밀번호는 최소 6자 이상이어야 합니다."),
}); // Zod 스키마 정의

const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: zodResolver(schema),
}); // 폼에 스키마 적용

• z.object: 객체의 구조를 정의
• z.string(): 필드가 문자열인지 검증
• min(length, message): 문자열의 최소 길이를 검증
  • max(length, message): 문자열의 최대 길이를 검증
  • length(size, message): 문자열의 정확한 길이를 검증

기본 문자열 검증, 길이 검증 외에도 엄청나게 많은 메서드들을 제공한다.

• 이메일 값 검증, 양수-음수 검증, 날짜 검증, …