24.10.20 NextJS react-hook-form Zod

Zod라이브러리는 간단한 구조부터 복잡한 구조까지 타입검증을 도와주는 라이브러리이다.

https://zod.dev/

GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference

 

npm i zod
yarn/pnpm add zod

 

import { z } from "zod";

z를 가지고 schema를 만든다.

const signInSchema = z.object({
    email: z.string().email({ message: "invalid email" }),
    password: z.string(),
});

이렇게 이메일이 string, email형식임을 미리 선언하고 비밀번호가 string임을 미리 선언해서 스키마를 만들어둔다.

const onSubmit = (value: FieldValues) => {
    signInSchema.parse(value);
};

버튼을 눌렀을 때 기존에 유효성 검사를 하던 것을 어느정도는 대신해주는 역할이다.

저 파싱 작업을 콘솔로 찍었을 때 만약 파싱을 통과한다면 value객체 자체를 보여준다.

실패한다면 ZodError를 반환해준다.

이곳에서 지정해준 메시지를 에러속에 담아서 리턴해주는 것을 알 수 있다.

TypeScript는 컴파일타임에 모두 js로 바꿔주는데 zod는 런타임에도 타입에 관련된 에러를 나타내준다.

따라서 우리가 유저이벤트같은 예기치 못한, 처리하지 못하는 런타임중의 타입검증을 할 수 있다.

 

그러면 react-hook-form의 패턴매칭, 필수값 등의 옵션이나 zod의 런타임 타입검증을 합치기 위해서는 resolver가 필요하다.

pnpm add @hookform/resolvers

import { zodResolver } from "@hookform/resolvers/zod";

라이브러리로부터 zodResolver를 가져와주고

const { register, handleSubmit, formState } = useForm({
    mode: "onChange",
    defaultValues: {
        email: "test@test.com",
        password: "",
    },
    resolver: zodResolver(signInSchema),
});

useForm 안에 resolver속성에 zodResolver를 넣고, 그 안에 미리 만들어둔 스키마를 집어넣는다.

이렇게 설정해두면 react-hook-form과 연결되어 처리가 가능하다.

const signInSchema = z.object({
    email: z
        .string({
            message: "email required",
        })
        .min(1, { message: "minimum length is 1" })
        .max(10, { message: "maximum length is 10" })
        .email({ message: "invalid email" }),
    password: z.string(),
});

이런식으로 처리해두면 길이나 타입이나 형식같은 유효성검사에 따른 다양한 메시지를 처리해줄 수 있다.

 

확실히 사용성은 좋은 것 같다.