[FE / REACT] Zod - (2)

사용법

 

기본적인 사용법은 먼저

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 런타임시 에러를 막을 수 있고 유효성 검사도 간단하게 할 수 있다!

 

그리고 무엇보다 코드가 간결해진다.......!

만약 유효성 검사를 여러개 통과해야 버튼이 클릭되게 하고싶다거나

여러가지 체크박스를 모두 선택되어야 다음 동작이 가능하게 할때

두가지를 사용하면 코드를 간결하게 가져갈 수 있다는 장점이 있다