zod란 무엇인가?
zod is a TypeScript-first schema declaration and validation library.
말 그대로 스키마 선언과 유효성을 검사하는 라이브러리이다.
진행하던 프로젝트의 form으로 받은 데이터들의 유효성을 검사하려고 사용했던 라이브러리.
1. 왜 사용해야 하지?
우선 홈페이지의 Login, 회원가입 구현을 위해서 사용자로부터 입력받을 값들을 제한시켜야 했다.
⇒ 예를들어 사용자의 이름은 n글자 이하로, 비밀번호는 특정문자를 포함하게….
이런식으로 여러 규칙을 만들고 적용하려면 많은 if문이 사용되고 코드또한 난잡하게 된다.
또한 react-hook-form에서 처리 할 수도 있지만 그렇게 되면 input태그 안에 코드들이 많아지게 되고, 한꺼번에 유효성 검사를 관리하기 쉽지 않다.
하지만 zod를 사용하면 이런 과정을 굉장히 간편하게 처리해줄 수 있다.
import { z } from "zod";
const usernameSchema = z.string().min(5).max(10);
export async function createAccount(
prevState: any,
formData: FormData
) {
const username = formData.get("username"),
usernameSchema.parse(username);
}위 코드를 예시로 살펴보자.
- formData로 input태그의 name=”username”인 값을 불러온다
- zod를 이용하여 타입스키마를 제작한다.
- usernameSchema.parse를 이용하여 유효성 여부를 검사한다.
여기서 parse를 사용했을 때 검사 결과가 false가 나오면 error를 발생시킨다.
이 error를 따로 throw와 같은 코드로 처리해주지 않으면 사이트에 error를 띄우고 망가진다.
따라서 safeParse를 사용하여 이 문제를 해결했다.
2. success & error handling
결국 zod를 이용하여 얻고싶어했던 내용은 사용자가 입력한 input이 유효성 검사에 통과되어서 로그인 또는 회원가입을 진행시킬 것인가? 가 목적이었다.
stringSchema.safeParse(12);
// => { success: false; error: ZodError }
stringSchema.safeParse("billie");
// => { success: true; data: 'billie' }위 코드에서 볼 수 있듯이 safeParse를 이용하면 success값으로 boolean을 받아서 유효성 검사 통과여부를 체크해볼 수 있고, 만약 성공하면 data값을 받고, 실패하면 error를 받을 수 있다.
따라서 성공시 success로 처리하면 되고, 실패시 zod에서 제공해주는 error로 사용자의 화면에 뿌릴 수 있다.
아래는 error를 console.log()를 이용하여 출력해본 결과들이다.
1) error
ZodError: [
{
"code": "custom",
"message": "Invalid Phone Format",
"path": []
}
]2) error.flatten()
{ formErrors: [ 'Invalid Phone Format' ], fieldErrors: {} }처리하기 간편한 error.flatten()을 필자는 사용하였다.
smsLogin함수의 return값으로 {error : error.flatten()}을 주어서 아래 코드에서 사용하였다.
export default function Home(){
const [state, action] = useFormState(smsLogin, initialState);
return (
// ...중략
<FormInput
name="phone"
type="text"
required
placeholder="Phone number"
errors={state.error?.formErrors}
/>
);
}