폼

React Hook Form ＋ Zod ／ TanStack Form

결과 비교

같은 것을 각 라이브러리로 만들었습니다. 직접 만져 보세요.

React Hook Form ＋ Zod

TanStack Form

코드 비교

코드를 고치면 오른쪽 미리보기가 바로 바뀝니다.

내 프로젝트에서 이 예제를 실행하려면:npx shadcn@latest add button input label

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
import { Button } from "./components/ui/button"
import { Input } from "./components/ui/input"
import { Label } from "./components/ui/label"

// ① 규칙: 입력 검증 규칙을 한곳에 모아서 작성
const schema = z.object({
  email: z.email("올바른 이메일 주소를 입력해 주세요"),
  password: z.string().min(8, "8자 이상 입력해 주세요").regex(/[0-9]/, "숫자를 포함해 주세요"),
})

// 규칙으로부터 폼 값의 타입을 만듦
type FormValues = z.infer<typeof schema>

export default function App() {
  // 폼을 준비 (규칙은 zodResolver로 전달)
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({ resolver: zodResolver(schema) })

  // 모든 규칙을 통과했을 때만 호출됨
  const onSubmit = (values: FormValues) => {
    alert("로그인: " + values.email)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4 p-5">
      <div className="flex flex-col gap-2">
        <Label htmlFor="email">이메일</Label>
        {/* ② 연결: 입력란을 폼에 연결 */}
        <Input id="email" {...register("email")} />
        {/* ③ 알림: 규칙에 맞지 않으면 오류를 표시 */}
        {errors.email && (
          <p className="text-sm text-destructive">{errors.email.message}</p>
        )}
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="password">비밀번호</Label>
        <Input id="password" type="password" {...register("password")} />
        {errors.password && (
          <p className="text-sm text-destructive">{errors.password.message}</p>
        )}
      </div>

      <Button type="submit">로그인</Button>
    </form>
  )
}

Open Sandbox

비교

2026년 10월 기준

React Hook Form ＋ Zod

추천공식 사이트 ↗

특징

가장 많이 쓰이는 조합입니다. 입력란에 register를 붙이기만 하면 값이 모이고, 검증 규칙은 Zod로 한곳에 모아 씁니다

이럴 때 좋아요

추천. shadcn/ui의 폼도 이 조합으로 만들어져 있습니다

TanStack Form

공식 사이트 ↗

특징

TanStack Query 등과 같은 계열의 비교적 새로운 라이브러리입니다. 입력란마다 form.Field로 감싸서 씁니다. 타입(TypeScript) 검사가 꼼꼼합니다

이럴 때 좋아요

다른 TanStack 라이브러리와 맞추고 싶을 때. 입력란이 많아서 타입으로 실수를 막고 싶을 때