React-hook-form & Zod를 사용해보자

유저는 회원가입/로그인 할 때 항상 값을 제대로 입력해주지 않는다.

고의고 아니고를 떠나서 그렇다. 숫자칸에 "숫자만 넣으세요" 라고 해도 실수로 글자를 넣을 수 있는 법이니까.

출처 : https://articles.wesionary.team/react-hook-form-schema-validation-using-zod-80d406e22cd8

 

React-hook-form 이란?

 

그래서 프론트 개발자가 막아주는 게 좋다. 틀리면

"여기는 숫자만 들어가야 해요" , "여기선 문자만 쓸 수 있어요"

 

이 역할을 해주는 게 React-hook-form이다.

서버에 전송하기 전에 한번 걸러주는 필터 같은 친구다.

 

import React from "react";
import { useForm } from "react-hook-form";

const MyForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    console.log("폼 데이터:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("username", { required: "이름은 필수입니다!" })}
        placeholder="이름"
      />
      {errors.username && <p>{errors.username.message}</p>}

      <input
        {...register("password", { minLength: 5 })}
        type="password"
        placeholder="비밀번호"
      />
      {errors.password && <p>비밀번호는 최소 5자 이상이어야 합니다!</p>}

      <button type="submit">제출</button>
    </form>
  );
};

export default MyForm;

 

(공식 홈페이지 주소)

https://react-hook-form.com/

 

나는 기존에 react-hook-form이란 존재만 알았고 회원가입,로그인 할때만 쓸 수 있는 줄 알았다.

근데 찾아보니 인풋이면 다 되는 것이다..?!

이 기회에 새로운 거 배우면 좋겠다는 마음에 React-hook-form에 대해 찾아봤고 zod 라는 라이브러리도 알게 되었다.

---

Zod란?

 

• 목적: 데이터 스키마 정의와 유효성 검사.
• 설명: 폼에 한정되지 않고, 서버에서 들어오는 데이터나 API 요청 데이터도 검증 가능. TypeScript와 잘 어울리는 타입 안전성을 제공.

 

const signupSchema = z.object({
  username: z.string().min(3, "이름은 최소 3글자여야 합니다."),
  password: z.string().min(8, "비밀번호는 최소 8자 이상이어야 합니다."),
  email: z.string().email("유효한 이메일 주소를 입력하세요."),
});

const formData = {
  username: "minho",
  password: "password123",
  email: "invalid-email",
};

const validation = signupSchema.safeParse(formData);

if (!validation.success) {
  console.log("에러:", validation.error.errors);
} else {
  console.log("유효한 데이터:", validation.data);
}

 

React Hook Form: 폼 상태 관리와 폼 제출 처리를 담당 

Zod: 데이터 스키마 정의와 유효성 검사를 담당.

같이 쓰면 더욱 더 효율이 좋은데 

 

코드 가독성 + 파일 분리

강력한 데이터 검증

타입 안전성

 

난 이중에서 코드 가독성이 압도적으로 좋아져서 좋았다.

(훅을 다 빼도 모임생성에 코드가 400줄이 넘어갔기에 너무 잘 썼다!)

 

같이 쓰면 아래와 같은 코드가 된다.

 

예시코드 )

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const schema = z.object({
  username: z.string().min(3, "이름은 최소 3글자 이상이어야 합니다."),
  age: z.number().min(18, "성인만 가능합니다!"),
});

const MyForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schema), // Zod를 React Hook Form에 연결
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} />
      {errors.username && <p>{errors.username.message}</p>}

      <input type="number" {...register("age")} />
      {errors.age && <p>{errors.age.message}</p>}

      <button type="submit">제출</button>
    </form>
  );
};