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),
});
'NOTE' 카테고리의 다른 글
css로 부모선택자 선택하기 (0) | 2024.07.04 |
---|---|
gitignore에 dist추가해도 tracking 되는 이슈 (0) | 2024.06.27 |
typescript 배열 중 하나 타입으로 선언하기 (0) | 2023.08.16 |
react 패키지를 next로 컴파일 하는 패키지 (0) | 2023.08.06 |
리액트 오류: React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node (0) | 2023.08.05 |