react-hook-form validate with zod

 react hook form을 사용하면서 validate를 위해 zod패키지를 많이 사용하는것 같다, 

패키지 용량도 작고 유효성검증(이메일..등등 다양한 폼요소)도 간단하게 할 수 있다. 

 

각각 폼에 넣는것이아니라 한번에 컨트롤 할수있어서 좋은듯하다.

 

zod 설치하기 

npm add zod @hookform/resolvers

 

import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';

const schema = z.object({
  selectReason: z.string().nonempty('이유를 선택해주세요'),
  detailReason: z.string().trim().nonempty('디테일 이버력해'),  
  refundName: z.string().trim().nonempty('받은사람 입력해주세요.'),
  refundNotice: z.string().optional(),
  receiverZipCd: z.string().nonempty('우편번호 입력'),
  receiverAddress: z.string().nonempty('받는사람 주소 입력'),
  receiverJibunAddress: z.string().nonempty('지번주소 입력'),
  receiverContact1Prefix: z.string().nonempty('dddd'),
  receiverContact1Middle: z.string().nonempty('dddd'),
  receiverContact1End: z.string().nonempty('dddd'),
  deliveryCompany: z.string().optional(),
  invoiceNo: z.string().optional(),
});

const methods = useForm({
   resolver: zodResolver(schema),
});

 

 

참고
https://velog.io/@ckstn0777/React-Hook-Form%EA%B3%BC-Zod%EB%A5%BC-%ED%86%B5%ED%95%9C-Form-Validation-%EC%B2%98%EB%A6%AC