{"id":773,"date":"2026-05-18T23:01:12","date_gmt":"2026-05-18T15:01:12","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-forms-10\/"},"modified":"2026-05-19T20:26:17","modified_gmt":"2026-05-19T12:26:17","slug":"react-forms-10","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-forms-10\/","title":{"rendered":"React Form \ub2e4\ub8e8\uae30 (Ch.10)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 748 -->\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.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;}\ntable{width:100%;border-collapse:collapse;font-size:15px;background:var(--color-bg-card);}\nth,td{padding:11px 12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top;}\nth{background:#f1f5f9;font-weight:700;color:#0f172a;}\ntd:first-child,th:first-child{font-weight:700;}\n@media (max-width:560px){.tablewrap table,.tablewrap thead,.tablewrap tbody,.tablewrap tr,.tablewrap th,.tablewrap td{display:block;width:auto;}.tablewrap thead{display:none;}.tablewrap tr{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;}.tablewrap td{border:none;border-bottom:1px solid #f1f5f9;padding:9px 14px;}.tablewrap td:first-child{background:#f1f5f9;font-weight:800;font-size:15.5px;}.tablewrap td:last-child{border-bottom:none;}.tablewrap td[data-label]::before{content:attr(data-label) \" \u2014 \";font-weight:700;color:var(--color-primary);}}\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 \uae30\ucd08 10\ud3b8<\/span>\n  <h1>React Form \u2014 controlled vs uncontrolled<\/h1>\n  <p>input 1\uac1c\ubd80\ud130 \ud68c\uc6d0\uac00\uc785 \ud3fc\uae4c\uc9c0. \ub450 \ud328\ud134 \ube44\uad50 + \ub2e4\uc911 input \ud45c\uc900 \ud328\ud134 + \uc81c\ucd9c \ucc98\ub9ac.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-31.jpg\" alt=\"\uc785\ub825 \ud544\ub4dc\uc640 \uc81c\ucd9c \ubc84\ud2bc\uc774 \uc788\ub294 \uae68\ub057\ud55c \ud3fc \uc77c\ub7ec\uc2a4\ud2b8 \u2014 React Form \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>\uc2e4\uc804 \uc6f9 \uc571\uc758 \uc808\ubc18\uc740 \ud3fc. \ub85c\uadf8\uc778\u00b7\ud68c\uc6d0\uac00\uc785\u00b7\uac80\uc0c9\u00b7\uacb0\uc81c\u00b7\uc124\uc815. React \uc5d0\uc11c \ud3fc \ucc98\ub9ac\ub294 \ub450 \uac00\uc9c0 \ud070 \uac08\ub798 \u2014 <strong>controlled<\/strong> (state \uac00 input \uac12\uc744 \uc9c1\uc811 \ucd94\uc801) \uc640 <strong>uncontrolled<\/strong> (DOM \uc774 \uc790\uccb4 \uad00\ub9ac, React \ub294 \ud544\uc694\ud560 \ub54c\ub9cc \uc77d\uc74c). \ub458 \ub2e4 \uc54c\uc544\uc57c \ud55c\ub2e4.<\/p>\n\n<p>\uc774\ubc88 10\ud3b8\uc5d0\uc11c \ub450 \ud328\ud134 \ube44\uad50 + \ub2e4\uc911 input \uc758 \ud45c\uc900 useState \ud328\ud134 + \uc81c\ucd9c \ucc98\ub9ac + \uae30\ubcf8 \uac80\uc99d\uae4c\uc9c0. 21\ud3b8\uc5d0\uc11c\ub294 Zod + React Hook Form \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac \ud328\ud134\uc73c\ub85c \ud655\uc7a5.<\/p>\n\n<h2>1. controlled \u2014 useState \uac00 single source of truth<\/h2>\n\n<p>\uac00\uc7a5 \ud754\ud55c \ud328\ud134. input \uc758 <code>value<\/code> \ub97c state \uc5d0 \ubb36\uace0 <code>onChange<\/code> \ub85c \uac31\uc2e0.<\/p>\n\n<div class=\"code-block\">function LoginForm() {\n  const [email, setEmail] = useState(&#8221;);\n  const [pwd, setPwd] = useState(&#8221;);\n\n  return (\n    &lt;form&gt;\n      &lt;input\n        type=&#8221;email&#8221;\n        value={email}\n        onChange={(e) =&gt; setEmail(e.target.value)}\n      \/&gt;\n      &lt;input\n        type=&#8221;password&#8221;\n        value={pwd}\n        onChange={(e) =&gt; setPwd(e.target.value)}\n      \/&gt;\n    &lt;\/form&gt;\n  );\n}<\/div>\n\n<p>\ub9e4 \ud0a4 \uc785\ub825\ub9c8\ub2e4 setState \u2192 re-render. \ucc98\uc74c\uc5d4 \ube44\ud6a8\uc728 \uac19\uc9c0\ub9cc React \uac00 \ube60\ub974\uace0, \uc785\ub825 \ub3c4\uc911 \uac80\uc99d\u00b7\uc790\ub3d9 \ubcc0\ud658\u00b7\ubbf8\ub9ac\ubcf4\uae30\ub97c \uc790\uc720\ub86d\uac8c \ud560 \uc218 \uc788\ub294 \uac8c \uc9c4\uc9dc \uac00\uce58.<\/p>\n\n<div class=\"databox\">\n<strong>\uc65c single source of truth \uc778\uac00<\/strong> \u2014 state \ub9cc \ubcf4\uba74 input \uac12\uc774 \ubcf4\uc7a5\ub428. \uc678\ubd80\uc5d0\uc11c reset \ubc84\ud2bc\uc73c\ub85c <code>setEmail('')<\/code> \ud558\uba74 input \ub3c4 \uc790\ub3d9 \ud074\ub9ac\uc5b4. DOM \ub530\ub85c \ucd94\uc801\ud560 \ud544\uc694 0. \ub514\ubc84\uae45\u00b7\ud14c\uc2a4\ud2b8 \uc555\ub3c4\uc801 \uc6b0\uc704.\n<\/div>\n\n<h2>2. uncontrolled \u2014 useRef \ub85c \ud544\uc694\ud560 \ub54c \uc77d\uae30<\/h2>\n\n<p>\ub9e4 \uc785\ub825\ub9c8\ub2e4 state \uac31\uc2e0\uc774 \ubd80\ub2f4\uc2a4\ub7ec\uc6b4 \uacbd\uc6b0 (10000\uc790 textarea \ub4f1) \ub610\ub294 input \uac12\uc774 \ubc14\ub00c\uc5b4\ub3c4 \ub2e4\ub978 UI \uac00 \uc548 \ubc14\ub00c\ub294 \uacbd\uc6b0. <code>useRef<\/code> \ub85c DOM \ucc38\uc870\ub97c \uc7a1\uace0 \uc81c\ucd9c \uc2dc\uc810\uc5d0 \ud55c \ubc88 \uc77d\ub294\ub2e4.<\/p>\n\n<div class=\"code-block\">import { useRef } from &#8216;react&#8217;;\n\nfunction FeedbackForm() {\n  const textareaRef = useRef(null);\n\n  const handleSubmit = (e) =&gt; {\n    e.preventDefault();\n    const text = textareaRef.current.value;\n    fetch(&#8216;\/api\/feedback&#8217;, { method: &#8216;POST&#8217;, body: text });\n  };\n\n  return (\n    &lt;form onSubmit={handleSubmit}&gt;\n      &lt;textarea ref={textareaRef} defaultValue=&#8221;&#8221; \/&gt;\n      &lt;button&gt;\uc804\uc1a1&lt;\/button&gt;\n    &lt;\/form&gt;\n  );\n}<\/div>\n\n<p><code>value<\/code> \ub300\uc2e0 <code>defaultValue<\/code> \uc0ac\uc6a9 \u2014 DOM \uc774 \uc790\uccb4 \uad00\ub9ac. React \ub294 ref \ub97c \ud1b5\ud574 \ud544\uc694\ud560 \ub54c\ub9cc \uac12\uc744 \uac00\uc838\uc628\ub2e4. \uc7ac\ub80c\ub354 0.<\/p>\n\n<h2>3. \ub450 \ud328\ud134 \ud55c \uc904 \ube44\uad50<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>\uad00\uc810<\/th><th>controlled<\/th><th>uncontrolled<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>\uac12 \ucd94\uc801<\/td><td data-label=\"controlled\">useState (\ub9e4 \uc785\ub825 \uc7ac\ub80c\ub354)<\/td><td data-label=\"uncontrolled\">DOM (\uc7ac\ub80c\ub354 0)<\/td><\/tr>\n<tr><td>\uc2e4\uc2dc\uac04 \uac80\uc99d\u00b7\ubcc0\ud658<\/td><td data-label=\"controlled\">\u2605 \uc27d\ub2e4 (state \ubcf4\uace0)<\/td><td data-label=\"uncontrolled\">\uc5b4\ub835\ub2e4 (DOM \uc774\ubca4\ud2b8 \uc9c1\uc811)<\/td><\/tr>\n<tr><td>\uc678\ubd80 reset\/\uc81c\uc5b4<\/td><td data-label=\"controlled\">\u2605 setState \ud55c \uc904<\/td><td data-label=\"uncontrolled\">ref.current.value = &#8221; (\uc218\ub3d9)<\/td><\/tr>\n<tr><td>\ub300\ub7c9 \ud14d\uc2a4\ud2b8<\/td><td data-label=\"controlled\">\ub9e4 \uc785\ub825 \ubd80\ub2f4<\/td><td data-label=\"uncontrolled\">\u2605 \ubd80\ub2f4 0<\/td><\/tr>\n<tr><td>\ud30c\uc77c input (file upload)<\/td><td data-label=\"controlled\">\ubd88\uac00 (\ube0c\ub77c\uc6b0\uc800 \ubcf4\uc548)<\/td><td data-label=\"uncontrolled\">\u2605 \ud544\uc218<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<p>\uc2e4\uc804 \u2014 99% controlled. <strong>file input<\/strong>\u00b7<strong>\ub300\uc6a9\ub7c9 \ud14d\uc2a4\ud2b8<\/strong> \ub9cc uncontrolled. \ud5f7\uac08\ub9ac\uba74 controlled \ubd80\ud130 \uc2dc\uc791.<\/p>\n\n<h2>4. \ub2e4\uc911 input \u2014 \uac1d\uccb4 state \ud328\ud134<\/h2>\n\n<p>\ud68c\uc6d0\uac00\uc785 \ud3fc\ucc98\ub7fc input \uc774 5\uac1c+ \uba74 useState 5\uac1c\ub294 \uc9c0\uc800\ubd84. <strong>\uac1d\uccb4 \ud558\ub098\ub85c \ubb36\uace0 name \uc18d\uc131 \ud65c\uc6a9<\/strong>.<\/p>\n\n<div class=\"code-block\">function SignupForm() {\n  const [form, setForm] = useState({\n    email: &#8221;,\n    password: &#8221;,\n    name: &#8221;,\n    age: &#8221;\n  });\n\n  const handleChange = (e) =&gt; {\n    const { name, value } = e.target;\n    setForm(prev =&gt; ({ &#8230;prev, [name]: value }));  \/\/ 6\ud3b8 \ud568\uc218\ud615 + \ub3d9\uc801 \ud0a4\n  };\n\n  const handleSubmit = (e) =&gt; {\n    e.preventDefault();\n    \/\/ \uac80\uc99d\n    if (!form.email.includes(&#8216;@&#8217;)) return alert(&#8216;\uc774\uba54\uc77c \ud615\uc2dd \uc624\ub958&#8217;);\n    if (form.password.length &lt; 8) return alert(&#8216;\ube44\ubc00\ubc88\ud638 8\uc790 \uc774\uc0c1&#8217;);\n    \/\/ \uc804\uc1a1\n    fetch(&#8216;\/api\/signup&#8217;, { method: &#8216;POST&#8217;, body: JSON.stringify(form) });\n  };\n\n  return (\n    &lt;form onSubmit={handleSubmit}&gt;\n      &lt;input name=&#8221;email&#8221; type=&#8221;email&#8221; value={form.email} onChange={handleChange} \/&gt;\n      &lt;input name=&#8221;password&#8221; type=&#8221;password&#8221; value={form.password} onChange={handleChange} \/&gt;\n      &lt;input name=&#8221;name&#8221; value={form.name} onChange={handleChange} \/&gt;\n      &lt;input name=&#8221;age&#8221; type=&#8221;number&#8221; value={form.age} onChange={handleChange} \/&gt;\n      &lt;button&gt;\uac00\uc785&lt;\/button&gt;\n    &lt;\/form&gt;\n  );\n}<\/div>\n\n<p>\ud575\uc2ec\uc740 <code>handleChange<\/code> \ud55c \ud568\uc218\ub85c \ubaa8\ub4e0 input \ucc98\ub9ac. <code>name<\/code> \uc18d\uc131\uc744 \uac1d\uccb4 \ud0a4\ub85c \uc0ac\uc6a9\ud558\ub294 <strong>\ub3d9\uc801 \ud0a4 ([name])<\/strong> \uac00 \ud328\ud134. input \uac1c\uc218\uac00 \ub298\uc5b4\ub3c4 \ud578\ub4e4\ub7ec\ub294 \uadf8\ub300\ub85c.<\/p>\n\n<div class=\"warnbox\">\n<strong>\uac80\uc99d \ub77c\uc774\ube0c\ub7ec\ub9ac \uc0ac\uc804 \uc608\uace0<\/strong> \u2014 \uac80\uc99d \ub85c\uc9c1\uc774 5\uac1c \ub118\uc5b4\uac00\uba74 \uc9c1\uc811 if \ubd84\uae30 \ub300\uc2e0 <strong>Zod + React Hook Form<\/strong> \uc870\ud569\uc774 \ud45c\uc900. \ud68c\uc0ac stack \ub3c4 \uadf8\ub807\ub2e4 (Zod\u00b7RHF \ub458 \ub2e4 stack \uc5d0 \uc788\uc74c). 21\ud3b8\uc5d0\uc11c \uc815\uc2dd \ub3c4\uc785. \uadf8\ub54c\uae4c\uc9c0\ub294 \uc704 \ud328\ud134\uc774\uba74 \ucda9\ubd84.\n<\/div>\n\n<p>\uc785\ubb38\/\uae30\ucd08 \ub2e8\uacc4 \ub9c8\ubb34\ub9ac \ub2e8\uc6d0\uc774\ub2e4. 11\ud3b8\ubd80\ud130 \uc911\uae09 \u2014 useEffect \ub85c side effect (\ub370\uc774\ud130 fetch\u00b7\uad6c\ub3c5\u00b7timer) \ub2e4\ub8e8\uae30. \uc9c4\uc9dc \uc778\ud130\ub799\ud2f0\ube0c \uc571\uc758 \uc2dc\uc791.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00<\/h3>\n<p>React \uad50\uc7ac 11\ud3b8 \u2014 useEffect \ub85c side effect \ub2e4\ub8e8\uae30. \uc5b8\uc81c \uc2e4\ud589\ub418\ub098, dependency array, cleanup function, \ubb34\ud55c \ub8e8\ud504 \ud568\uc815.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-conditional-rendering-8\/\">8\ud3b8 \uc870\uac74\ubd80<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-list-rendering-9\/\">9\ud3b8 \ub9ac\uc2a4\ud2b8<\/a> \u00b7\n<strong>10\ud3b8 Form<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>React Form \u2014 controlled (useState) vs uncontrolled (ref). \ub2e4\uc911 input + \uc81c\ucd9c + \uac80\uc99d \ud328\ud134. \uad50\uc7ac 10\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":748,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-773","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\/773","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=773"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/773\/revisions"}],"predecessor-version":[{"id":799,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/773\/revisions\/799"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/748"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}