zod를 사용해서 정규식 없이 이메일 검증하기 (간단 버전)

이번 프로젝트때 zod를 처음 접하게 되었다.

 

zod를 사용하면 스키마 선언을 해서 유효성 검사를 할 수 있는 라이브러리이다.

이메일 검증을 할 때 복잡하게 따로 정규식을 넣지 않고 간편하게 가능한 장점이 있다. 

 

라이브러리다보니 설치는 필요하다.

 

npm install zod
npm i zod react-hook-form @hookform/resolvers

공식문서에서 설치는 위에껄로 하면 된다 써있는데, 

react-hook-form을 사용할 예정이면 아래거 설치 해야한다고 해서 난 결국 둘 다 했다.

 

사용 방법

import { z } from 'zod';

 

이렇게 상단에서 zod를 가져와주고

 

// 이메일 스키마 정의
const EmailSchema = z.string().email();

이메일 스키마를 정의 해준다.

 

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
  try {
    const validatedEmail = EmailSchema.parse(e.target.value);
    console.log('Valid email : ', validatedEmail);
  } catch (error) {
   setErrorMessage('잘못된 이메일입니다.');
   setErrorMessageColor('red100');
  }
};

 

나는 react + Ts 사용중이고, 

이메일을 적는 input의 값이 변경 될 때, 해당 값을 체크해서 

오류가 없는 경우 콘솔로 기재한 이메일을 보여주고, 

이메일 형식이 맞지 않는 경우 에러메시지와 색상 상태를 업데이트 하도록 해주었다.

 

 

만들어진 정규식이 물론 있지만, 괜찮은것을 찾아야 하고..

@넣고 . 넣어야 하고 등등 복잡한 것을 쉽게 할 수 있어 좋다.

 

물론, zod는 이메일만 검증해주는 것이 아니라 텍스트 수 제한, 숫자 제한 등

다양한 검증이 가능하고, 내가 위에 정의한 스키마는 단순히 이메일형식만 체크했지만,

이메일에 들어가는 단어수 등 디테일한 검증도 가능하고, 오류시의 메시지 설정까지 가능하다.

 

차차 검증이 필요한 부분도 반영해봐야겠다.

 

zod공식문서는 아래~

https://zod.dev/?id=table-of-contents