사용법
기본적인 사용법은 먼저
Zod에서 z를 불러와
z.object()를 통해 객체인 스키마를 정의한다!
export const loginSchema = z.object({
email: z
.string()
.min(1, '이메일을 입력해주세요.')
.regex(
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
'이메일 형식을 확인해주세요.',
),
password: z.string().min(1, { message: '비밀번호를 입력해주세요.' }),
});
z.string()으로 여러 validation을 추가할 수 있다!
잘 설명되어있는 아래 링크를 참고해 볼 수 있겠다!
https://velog.io/@tmdgp0212/Zod
String 형 말고도 numbers, date, boolean 등도 validation을 추가할 수 있다
그리도 refine 메소드를 사용하면 커스텀 validation을 지정해 사용할 수 있다
.refine((value) ⇒ {message: string, path: [string | number], params: object});
또한 required_error를 사용해 직접 에러메시지를 지정할 수 있다
react-hook-form과 사용!
npm i react-hook-form zod @hookform/resolvers
먼저 @hookform/resolvers를 다운로드하여주고
const { watch, getValues, setValue } = useForm({
resolver: zodResolver(checkBoxSchema(isCatch)),
defaultValues: {
allAgree: false,
check1: false,
check2: false,
check3: false,
},
});
resolver : zodResolver(스키마 이름)을 넣어주면
생성한 Zod 스키마로 유효성 검사가 가능하다
Zod와 react-hook-form을 동시에 사용하면
간단하게 typescript 런타임시 에러를 막을 수 있고 유효성 검사도 간단하게 할 수 있다!
그리고 무엇보다 코드가 간결해진다.......!
만약 유효성 검사를 여러개 통과해야 버튼이 클릭되게 하고싶다거나
여러가지 체크박스를 모두 선택되어야 다음 동작이 가능하게 할때
두가지를 사용하면 코드를 간결하게 가져갈 수 있다는 장점이 있다
'FE > React' 카테고리의 다른 글
[FE / REACT] React Query (1) | 2024.02.05 |
---|---|
[FE / REACT] Next.js Image 이슈 (0) | 2024.01.17 |
[FE / REACT] .js 와 .jsx 차이 (0) | 2024.01.13 |
[FE / REACT] Zod (0) | 2024.01.10 |
[FE / REACT] react-hook-form (0) | 2024.01.09 |