{"id":786,"date":"2026-05-18T23:02:48","date_gmt":"2026-05-18T15:02:48","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-zod-rhf-22\/"},"modified":"2026-05-19T20:26:29","modified_gmt":"2026-05-19T12:26:29","slug":"react-zod-rhf-22","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-zod-rhf-22\/","title":{"rendered":"React Zod + React Hook Form (Ch.22)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 760 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root {--color-primary:#0891b2;--color-accent:#06b6d4;--color-bg:#f8fafc;--color-bg-card:#fff;--color-text:#0f172a;--color-text-muted:#64748b;--hero-start:#0f172a;--hero-end:#0891b2;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 24px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:80px 24px 60px;text-align:center;}\n.hero .eyebrow{display:inline-block;font-size:14px;color:#67e8f9;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;}\n.hero h1{font-size:36px;margin:0 0 16px;line-height:1.3;font-weight:800;}\n.hero p{color:#cffafe;font-size:18px;max-width:640px;margin:0 auto;line-height:1.6;}\n.hero img{width:100%;max-width:640px;height:auto;margin:32px auto 0;border-radius:10px;display:block;}\narticle{padding-top:48px;}\narticle h2{font-size:26px;margin:56px 0 20px;padding-left:14px;border-left:5px solid var(--color-accent);line-height:1.4;}\narticle h3{font-size:19px;margin:32px 0 12px;color:var(--color-primary);}\narticle p{margin:16px 0;}\narticle strong{color:var(--color-primary);font-weight:700;}\narticle code{background:#ecfeff;padding:2px 8px;border-radius:4px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;color:#0e7490;}\n.databox{background:#ecfeff;border-left:4px solid var(--color-accent);padding:16px 20px;margin:24px 0;border-radius:0 8px 8px 0;font-size:15.5px;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);padding:16px 20px;margin:24px 0;border-radius:8px;font-size:15.5px;}\n.code-block{background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:8px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.6;margin:20px 0;overflow-x:auto;white-space:pre;}\n.cta{background:linear-gradient(135deg,#0891b2 0%,#06b6d4 100%);color:#fff;padding:28px 24px;border-radius:12px;margin:48px 0 0;text-align:center;}\n.cta h3{color:#fff;margin:0 0 8px;font-size:20px;}\n.cta p{color:#cffafe;margin:0;font-size:15.5px;}\n.footer-nav{margin-top:32px;padding-top:20px;border-top:1px solid #e2e8f0;font-size:14px;color:var(--color-text-muted);}\n.footer-nav a{color:var(--color-primary);text-decoration:none;}\n@media (max-width:480px){.hero h1{font-size:26px;}.hero p{font-size:16px;}article h2{font-size:21px;}article h3{font-size:17px;}body{font-size:16px;}}\n<\/style>\n<section class=\"hero\">\n  <span class=\"eyebrow\">React \uad50\uc7ac \u00b7 \uace0\uae09 22\ud3b8<\/span>\n  <h1>React Zod + React Hook Form<\/h1>\n  <p>\ud0c0\uc785 \uc548\uc804 \ud3fc\uc758 \ud45c\uc900. \ud68c\uc0ac stack \uc5d0 \ub458 \ub2e4 \uc788\ub294 \uc774\uc720\ub294 \uba85\ud655\ud558\ub2e4.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-43.jpg\" alt=\"\uac80\uc99d \uccb4\ud06c \ub9c8\ud06c\uac00 \ud544\ub4dc \uc606\uc5d0 \ub728\ub294 \ud3fc \uc77c\ub7ec\uc2a4\ud2b8 \u2014 Zod+RHF \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>10\ud3b8\uc758 \ub2e4\uc911 input + \uac1d\uccb4 state + if \uac80\uc99d \ud328\ud134\uc740 \uc785\ubb38\uc6a9. \ud68c\uc6d0\uac00\uc785\uc5d0 8\uac1c \ud544\ub4dc, \uac80\uc99d \uaddc\uce59 15\uac1c \ub4e4\uc5b4\uac00\uba74 \uadf8 \ucf54\ub4dc\ub294 \uace7 \ud1b5\uc81c \ubd88\uac00. \ud68c\uc0ac stack \uc758 \ub2f5 \u2014 <strong>React Hook Form<\/strong> (\uc131\ub2a5\u00b7DX) + <strong>Zod<\/strong> (\uc2a4\ud0a4\ub9c8\u00b7\ud0c0\uc785 \ucd94\ub860) \uc870\ud569. 2026 \ub144 React \ud3fc\uc758 \uc0ac\uc2e4\uc0c1 \ud45c\uc900.<\/p>\n\n<p>\uc774\ubc88 22\ud3b8\uc740 \ub450 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \uc815\ud655\ud55c \uc5ed\ud560 \ubd84\ub2f4 + \ud1b5\ud569 \ud328\ud134 + \ud754\ud55c \uc5d0\ub7ec \uc2dc\uac01\ud654\u00b7\uc11c\ubc84 \uc5d0\ub7ec \ucc98\ub9ac\uae4c\uc9c0.<\/p>\n\n<h2>1. \uc65c \ub458\uc774 \uc9dd\uc778\uac00<\/h2>\n\n<div class=\"databox\">\n<strong>\uc5ed\ud560 \ubd84\ub2f4<\/strong> \u2014 Zod \ub294 <em>\uc2a4\ud0a4\ub9c8 \uc815\uc758<\/em> (\ud544\ub4dc\u00b7\ud0c0\uc785\u00b7\uaddc\uce59), RHF \ub294 <em>\ud3fc \uc0c1\ud0dc \uad00\ub9ac<\/em> (input \uac12\u00b7\uc5d0\ub7ec\u00b7\uc81c\ucd9c). RHF \ub2e8\ub3c5\uc774\uba74 \uac80\uc99d \uaddc\uce59\uc744 \ub9e4\ubc88 \ud568\uc218\ub85c \uc791\uc131. Zod \uc640 \uacb0\ud569\ud558\uba74 \uc2a4\ud0a4\ub9c8 1\uac1c\ub85c (a) \ub7f0\ud0c0\uc784 \uac80\uc99d + (b) TypeScript \ud0c0\uc785 \uc790\ub3d9 \ucd94\ub860 + (c) RHF resolver \uc790\ub3d9 \uc5f0\uacb0.\n<\/div>\n\n<h2>2. \ud1b5\ud569 \uc14b\uc5c5 \u2014 5\ubd84<\/h2>\n\n<div class=\"code-block\">npm install react-hook-form zod @hookform\/resolvers\n\n\/\/ SignupForm.tsx\nimport { useForm } from &#8216;react-hook-form&#8217;;\nimport { z } from &#8216;zod&#8217;;\nimport { zodResolver } from &#8216;@hookform\/resolvers\/zod&#8217;;\n\n\/\/ 1. \uc2a4\ud0a4\ub9c8 \uc815\uc758 (\uc774\uac8c \uc9c4\uc2e4\uc758 \uc6d0\ucc9c)\nconst schema = z.object({\n  email: z.string().email(&#8216;\uc774\uba54\uc77c \ud615\uc2dd\uc774 \uc544\ub2d9\ub2c8\ub2e4&#8217;),\n  password: z.string().min(8, &#8216;8\uc790 \uc774\uc0c1\uc774\uc5b4\uc57c \ud569\ub2c8\ub2e4&#8217;),\n  age: z.coerce.number().min(14, &#8217;14\uc138 \uc774\uc0c1&#8217;).max(120),\n  terms: z.boolean().refine(v =&gt; v, &#8216;\uc57d\uad00 \ub3d9\uc758 \ud544\uc218&#8217;),\n});\n\n\/\/ 2. \ud0c0\uc785 \uc790\ub3d9 \ucd94\ucd9c \u2014 \ubcc4\ub3c4 type \uc791\uc131 \ubd88\ud544\uc694\ntype FormData = z.infer&lt;typeof schema&gt;;\n\nexport function SignupForm() {\n  const {\n    register,\n    handleSubmit,\n    formState: { errors, isSubmitting },\n  } = useForm&lt;FormData&gt;({ resolver: zodResolver(schema) });\n\n  const onSubmit = async (data: FormData) =&gt; {\n    \/\/ data \ub294 \uac80\uc99d\u00b7\ubcc0\ud658 \uc644\ub8cc\ub41c \uac1d\uccb4 (age \uac00 number \ubcf4\uc7a5)\n    await fetch(&#8216;\/api\/signup&#8217;, { method: &#8216;POST&#8217;, body: JSON.stringify(data) });\n  };\n\n  return (\n    &lt;form onSubmit={handleSubmit(onSubmit)}&gt;\n      &lt;input {&#8230;register(&#8217;email&#8217;)} type=&#8221;email&#8221; \/&gt;\n      {errors.email &#038;&#038; &lt;p&gt;{errors.email.message}&lt;\/p&gt;}\n\n      &lt;input {&#8230;register(&#8216;password&#8217;)} type=&#8221;password&#8221; \/&gt;\n      {errors.password &#038;&#038; &lt;p&gt;{errors.password.message}&lt;\/p&gt;}\n\n      &lt;input {&#8230;register(&#8216;age&#8217;)} type=&#8221;number&#8221; \/&gt;\n      {errors.age &#038;&#038; &lt;p&gt;{errors.age.message}&lt;\/p&gt;}\n\n      &lt;label&gt;&lt;input {&#8230;register(&#8216;terms&#8217;)} type=&#8221;checkbox&#8221; \/&gt; \uc57d\uad00 \ub3d9\uc758&lt;\/label&gt;\n      {errors.terms &#038;&#038; &lt;p&gt;{errors.terms.message}&lt;\/p&gt;}\n\n      &lt;button disabled={isSubmitting}&gt;{isSubmitting ? &#8216;\uac00\uc785 \uc911&#8230;&#8217; : &#8216;\uac00\uc785&#8217;}&lt;\/button&gt;\n    &lt;\/form&gt;\n  );\n}<\/div>\n\n<p>\ud575\uc2ec \u2014 <code>register('email')<\/code> \ud55c \uc904\uc774 input \uc758 value\u00b7onChange\u00b7onBlur\u00b7ref \ub97c \ub2e4 \uc5f0\uacb0. 10\ud3b8\uc758 controlled input \ud328\ud134\uc774 \uc790\ub3d9\ud654\ub41c \uc148. <code>handleSubmit<\/code> \uc774 \uac80\uc99d \ud1b5\uacfc \uc2dc\uc5d0\ub9cc onSubmit \ud638\ucd9c.<\/p>\n\n<h2>3. RHF \uc758 \uc131\ub2a5 \uc774\uc810 \u2014 uncontrolled \uae30\ubc18<\/h2>\n\n<p>10\ud3b8\uc5d0\uc11c controlled vs uncontrolled \ube44\uad50\ud588\ub2e4. RHF \ub294 <strong>\ub0b4\ubd80\uc801\uc73c\ub85c uncontrolled<\/strong> + ref \ucd94\uc801\uc73c\ub85c \ub3d9\uc791. \ub9e4 \ud0a4 \uc785\ub825\uc5d0 \uc7ac\ub80c\ub354 \uc548 \ud568 \u2192 \ud3fc \ud544\ub4dc 30\uac1c \uc9dc\ub9ac\ub3c4 \ubd80\ub4dc\ub7ec\uc6c0.<\/p>\n\n<div class=\"code-block\">\/\/ \ubcf4\ud1b5 controlled (\ub290\ub9bc)\nconst [name, setName] = useState(&#8221;);\n&lt;input value={name} onChange={(e) =&gt; setName(e.target.value)} \/&gt;\n\/\/ \ub9e4 \ud0a4 \uc785\ub825 \u2192 \ucef4\ud3ec\ub10c\ud2b8 \uc804\uccb4 \uc7ac\ub80c\ub354\n\n\/\/ RHF (\ube60\ub984)\n&lt;input {&#8230;register(&#8216;name&#8217;)} \/&gt;\n\/\/ \ub9e4 \ud0a4 \uc785\ub825 \u2192 DOM \ub9cc \uac31\uc2e0, React \uc7ac\ub80c\ub354 0<\/div>\n\n<p>16\ud3b8 \uc131\ub2a5 \ucd5c\uc801\ud654\uc5d0\uc11c \ub2e4\ub8ec memoization \uc774 \uac70\uc758 \ud544\uc694 \uc5c6\uc5b4\uc9c4\ub2e4. \ud3fc\uc740 RHF \uac00 \uc54c\uc544\uc11c \ube60\ub974\uac8c.<\/p>\n\n<h2>4. \uc11c\ubc84 \uc5d0\ub7ec + \ud754\ud55c \ud328\ud134<\/h2>\n\n<p>\ud074\ub77c\uc774\uc5b8\ud2b8 \uac80\uc99d \ud1b5\uacfc \u2192 \uc11c\ubc84 \ud638\ucd9c \u2192 \uc11c\ubc84\uac00 &#8220;\uc774\ubbf8 \uac00\uc785\ub41c \uc774\uba54\uc77c&#8221; \uac19\uc740 \uc5d0\ub7ec \ubc18\ud658. RHF \uc758 <code>setError<\/code> \ub85c \uac19\uc740 \uc5d0\ub7ec \ud45c\uc2dc \uc2dc\uc2a4\ud15c\uc5d0 \ud1b5\ud569:<\/p>\n\n<div class=\"code-block\">const { setError, handleSubmit } = useForm({&#8230;});\n\nconst onSubmit = async (data) =&gt; {\n  const res = await fetch(&#8216;\/api\/signup&#8217;, { &#8230; });\n  if (!res.ok) {\n    const { field, message } = await res.json();\n    setError(field, { message });   \/\/ \ud574\ub2f9 \ud544\ub4dc \uc5d0\ub7ec\ub85c \ud45c\uc2dc\n    return;\n  }\n  navigate(&#8216;\/welcome&#8217;);\n};<\/div>\n\n<div class=\"warnbox\">\n<strong>\uc2e4\uc804 \ud328\ud134<\/strong> \u2014 \uc2a4\ud0a4\ub9c8 \ud30c\uc77c\uc744 <code>src\/schemas\/<\/code> \ud3f4\ub354\uc5d0 \ubd84\ub9ac. \uc11c\ubc84 API (Next.js Route Handler \ub4f1) \uc640 \uac19\uc740 \uc2a4\ud0a4\ub9c8\ub97c import \ud574\uc11c \uc591\ucabd\uc774 \ub3d9\uc77c\ud55c \uac80\uc99d \uaddc\uce59. &#8220;\ud55c \ubc88 \uc791\uc131 = \ud074\ub77c\uc774\uc5b8\ud2b8 + \uc11c\ubc84 + \ud0c0\uc785 \ubaa8\ub450 \uc801\uc6a9&#8221; \uc774 Zod \uc758 \uc9c4\uc9dc \uac00\uce58.\n<\/div>\n\n<p>22\ud3b8\uc73c\ub85c React \uc758 \ubaa8\ub4e0 \uc77c\uc0c1 \ud328\ud134 \uc644\ub8cc. 23\ud3b8\ubd80\ud130\ub294 \ubbf8\ub798 \u2014 React Server Components \uac00 SPA \ubaa8\ub378\uc744 \uc5b4\ub5bb\uac8c \ubc14\uafb8\ub294\uc9c0.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00<\/h3>\n<p>React \uad50\uc7ac 23\ud3b8 \u2014 Server Components (RSC). use server\u00b7use client \uacbd\uacc4, \ub370\uc774\ud130 fetch\uac00 \ucef4\ud3ec\ub10c\ud2b8 \uc548\uc73c\ub85c \ub4e4\uc5b4\uc624\ub294 \uc2dc\ub300.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-typescript-20\/\">20\ud3b8 TypeScript<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-testing-21\/\">21\ud3b8 \ud14c\uc2a4\ud2b8<\/a> \u00b7\n<strong>22\ud3b8 Zod+RHF<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>React Zod + RHF \u2014 \ud0c0\uc785 \uc548\uc804 \ud3fc \uac80\uc99d. \uc2a4\ud0a4\ub9c8 1\uac1c\ub85c \ub7f0\ud0c0\uc784+\ucef4\ud30c\uc77c. \ud68c\uc0ac stack \uad8c\uc7a5.<\/p>\n","protected":false},"author":1,"featured_media":760,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-786","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/786","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=786"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/786\/revisions"}],"predecessor-version":[{"id":809,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/786\/revisions\/809"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/760"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=786"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=786"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}