[React] 제어 컴포넌트 / 비제어 컴포넌트

React 공식문서를 보면 제어 컴포넌트와 비제어 컴포넌트에 관한 얘기가 나온다.

제어 컴포넌트

>
HTML에서 `, , <select>`와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.<br />><br />우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다.<br /><br />출처 : https://ko.reactjs.org/docs/forms.html#controlled-components<br /><br /><br />말이 좀 어려울 수 있긴하지만 중요한 부분은 <br />>"엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다."<br /><br />이부분이다.<br /><br /><br/><br /><br /><pre><code>javascript<br />import styled from "styled-components";<br />import React, {useState} from "react";<br /><br />const Root = styled.div`<br /><br />`;<br /><br />export default function Home() {<br /><br /> const [input, setInput] = useState('');<br /><br /> const onChangeHandle = (e) => {<br /> setInput(e.target.value);<br /> console.log("input : " + input);<br /> }<br /><br /> return (<br /> <Root><br /> <input<br /> onChange={e => onChangeHandle(e)}<br /> value={input}<br /> /><br /> </Root><br /> )<br />}<br /></code></pre><br /><br />쉽게 설명하자면 위의 코드에서 input 창에 abcdef 를 입력하면 아래 사진처럼 input 값이 변경 될 때마다 input state 값이 업데이트 되는것이다.<br /><br /><br /><br /><br />제어컴포넌트의 쓰임새는 주로 <strong>유효성검사</strong>에 많이 쓰인다.<br /><br /><br /><h2 id="비제어 컴포넌트">비제어 컴포넌트</h2><br /><br />제어 컴포넌트에서 데이터는 React 컴포넌트에서 데이터가 다뤄지는거에 반해 비제어 컴포넌트는 DOM 자체에서 폼 데이터가 다루어진다. <br /><br />비제어 컴포넌트에서는 버튼을 누르는 최종적인 상황에서만 input의 value에 접근하므로 리렌더링이 계속해서 발생하진 않는다. 하지만 그만큼 비제어 컴포넌트는 사용자 입력의 가장 최신 값에 접근하기 힘들다는 특성이 있다.<br /><br /><br /><h2 id="결론">결론</h2><br />제어 컴포넌트와 비제어 컴포넌트중에 뭐가 좋다 나쁘다의 문제가 아니고 적절한 곳에 맞춰서 사용을 하면 된다.<br /> <br /><br /><br /><br /></div></div></div><aside class="post_toc__ia6Cm"><h2>Table of Contents</h2><ul><li class="post_toc-level-2__6xmZI"><a href="#제어 컴포넌트">제어 컴포넌트</a></li><li class="post_toc-level-2__6xmZI"><a href="#비제어 컴포넌트">비제어 컴포넌트</a></li><li class="post_toc-level-2__6xmZI"><a href="#결론">결론</a></li></ul></aside></div></main><!--$--><!--/$--><!--$--><!--/$--></main></div><footer class="Footer_footer__ccAcJ"><div class="Footer_footer-inner__DHIgd"><div class="Footer_footer-links__B_al5"><a href="#" class="Footer_footer-link__rexv_">Terms</a><a href="#" class="Footer_footer-link__rexv_">Privacy</a><a href="#" class="Footer_footer-link__rexv_">Security</a><a href="#" class="Footer_footer-link__rexv_">Status</a><a href="#" class="Footer_footer-link__rexv_">Contact</a></div><div class="Footer_copyright__RicVo"><p>© 2025 blog.juhwannn.com All rights reserved.</p></div></div></footer></div><script src="/_next/static/chunks/webpack-69cfb1f7ad54113c.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[1952,[\"108\",\"static/chunks/108-b365858860341910.js\",\"177\",\"static/chunks/app/layout-e7ffdddc53c633b0.js\"],\"default\"]\n3:I[3743,[\"108\",\"static/chunks/108-b365858860341910.js\",\"177\",\"static/chunks/app/layout-e7ffdddc53c633b0.js\"],\"ThemeProvider\"]\n4:I[7555,[],\"\"]\n5:I[1295,[],\"\"]\n6:I[8311,[\"506\",\"static/chunks/f97e080b-c91f03dbe369ca4c.js\",\"585\",\"static/chunks/b563f954-d24840e7874dea91.js\",\"202\",\"static/chunks/eec3d76d-d1b3c8b6803478b6.js\",\"711\",\"static/chunks/8e1d74a4-88758b38c4619db5.js\",\"874\",\"static/chunks/874-64b491c27552cdb3.js\",\"108\",\"static/chunks/108-b365858860341910.js\",\"829\",\"static/chunks/829-42f0c69a56186c83.js\",\"750\",\"static/chunks/app/(site)/layout-f0b6bb34e3478056.js\"],\"default\"]\n9:I[9665,[],\"MetadataBoundary\"]\nb:I[9665,[],\"OutletBoundary\"]\ne:I[4911,[],\"AsyncMetadataOutlet\"]\n10:I[9665,[],\"ViewportBoundary\"]\n12:I[6614,[],\"\"]\n13:\"$Sreact.suspense\"\n14:I[4911,[],\"AsyncMetadata\"]\n:HL[\"/_next/static/css/0a1b2c2ffcbd3f61.css\",\"style\"]\n:HL[\"/_next/static/css/39bde30cb8727196.css\",\"style\"]\n:HL[\"/_next/static/css/04ab09a00747800d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"pwC-yUthcRTv0MQwclp40\",\"p\":\"\",\"c\":[\"\",\"posts\",\"react-2025-06-26\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(site)\",{\"children\":[\"posts\",{\"children\":[[\"slug\",\"react-2025-06-26\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/0a1b2c2ffcbd3f61.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"ko\",\"children\":[\"$\",\"body\",null,{\"children\":[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]}]}]]}],{\"children\":[\"(site)\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/39bde30cb8727196.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"div\",null,{\"className\":\"app-container\",\"children\":[[\"$\",\"$L6\",null,{}],[\"$\",\"div\",null,{\"className\":\"main-container\",\"children\":[\"$L7\",[\"$\",\"main\",null,{\"className\":\"content\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:props:children:props:children:props:children:props:notFound:0:1:props:style\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$0:f:0:1:1:props:children:1:props:children:props:children:props:children:props:children:props:notFound:0:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:props:children:props:children:props:children:props:notFound:0:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:props:children:props:children:props:children:props:notFound:0:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}],[\"$\",\"footer\",null,{\"className\":\"Footer_footer__ccAcJ\",\"children\":[\"$\",\"div\",null,{\"className\":\"Footer_footer-inner__DHIgd\",\"children\":[[\"$\",\"div\",null,{\"className\":\"Footer_footer-links__B_al5\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#\",\"className\":\"Footer_footer-link__rexv_\",\"children\":\"Terms\"}],[\"$\",\"a\",null,{\"href\":\"#\",\"className\":\"Footer_footer-link__rexv_\",\"children\":\"Privacy\"}],[\"$\",\"a\",null,{\"href\":\"#\",\"className\":\"Footer_footer-link__rexv_\",\"children\":\"Security\"}],[\"$\",\"a\",null,{\"href\":\"#\",\"className\":\"Footer_footer-link__rexv_\",\"children\":\"Status\"}],[\"$\",\"a\",null,{\"href\":\"#\",\"className\":\"Footer_footer-link__rexv_\",\"children\":\"Contact\"}]]}],[\"$\",\"div\",null,{\"className\":\"Footer_copyright__RicVo\",\"children\":[\"$\",\"p\",null,{\"children\":\"© 2025 blog.juhwannn.com All rights reserved.\"}]}]]}]}]]}]]}],{\"children\":[\"posts\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"slug\",\"react-2025-06-26\",\"d\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L8\",[\"$\",\"$L9\",null,{\"children\":\"$La\"}],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/04ab09a00747800d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"$Lb\",null,{\"children\":[\"$Lc\",\"$Ld\",[\"$\",\"$Le\",null,{\"promise\":\"$@f\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"sToyJFOi7GwfdWuoPAgMC\",{\"children\":[[\"$\",\"$L10\",null,{\"children\":\"$L11\"}],null]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$12\",\"$undefined\"],\"s\":false,\"S\":false}\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"$13\",null,{\"fallback\":null,\"children\":[\"$\",\"$L14\",null,{\"promise\":\"$@15\"}]}]\nd:null\n11:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nc:null\n15:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"주환의 개발 블로그\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"웹 개발, 프로젝트 경험, 튜토리얼을 다룹니다.\"}],[\"$\",\"meta\",\"2\",{\"property\":\"og:title\",\"content\":\"주환의 개발 블로그\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:description\",\"content\":\"웹 개발, 프로젝트 경험, 튜토리얼을 다룹니다.\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:url\",\"content\":\"https://blog.juhwannn.com\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:site_name\",\"content\":\"blog.juhwannn.com\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image\",\"content\":\"https://blog.juhwannn.com/og-image.png\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"주환의 개발 블로그\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"웹 개발, 프로젝트 경험, 튜토리얼을 다룹니다.\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://blog.juhwannn.com/og-image.png\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"link\",\"16\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}]],\"error\":null,\"digest\":\"$undefined\"}\nf:{\"metadata\":\"$15:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"16:I[6874,[\"874\",\"static/chunks/874-64b491c27552cdb3.js\",\"479\",\"static/chunks/app/(site)/posts/%5Bslug%5D/page-06ba3d648016abe2.js\"],\"\"]\n17:I[3063,[\"506\",\"static/chunks/f97e080b-c91f03dbe369ca4c.js\",\"585\",\"static/chunks/b563f954-d24840e7874dea91.js\",\"202\",\"static/chunks/eec3d76d-d1b3c8b6803478b6.js\",\"711\",\"static/chunks/8e1d74a4-88758b38c4619db5.js\",\"874\",\"static/chunks/874-64b491c27552cdb3.js\",\"108\",\"static/chunks/108-b365858860341910.js\",\"829\",\"static/chunks/829-42f0c69a56186c83.js\",\"750\",\"static/chunks/app/(site)/layout-f0b6bb34e3478056.js\"],\"Image\"]\n"])</script><script>self.__next_f.push([1,"7:[\"$\",\"aside\",null,{\"className\":\"Sidebar_sidebar__7Uhc9\",\"children\":[[\"$\",\"div\",null,{\"className\":\"Sidebar_profile__xVqde\",\"children\":[[\"$\",\"$L16\",null,{\"href\":\"https://github.com/juhwannn\",\"children\":[\"$\",\"$L17\",null,{\"src\":\"/profile.png\",\"alt\":\"Profile\",\"width\":64,\"height\":64,\"unoptimized\":true,\"priority\":true,\"className\":\"Sidebar_avatar__HkHKi\"}]}],[\"$\",\"$L16\",null,{\"href\":\"https://github.com/juhwannn\",\"children\":[\"$\",\"h2\",null,{\"className\":\"Sidebar_name__RXMEq\",\"children\":\"Juhwannn\"}]}],[\"$\",\"p\",null,{\"className\":\"Sidebar_bio__UQ56i\",\"children\":\"Clean Code \u0026\\r\\nClean Architecture\"}],[\"$\",\"div\",null,{\"className\":\"Sidebar_stats__1CCgU\",\"children\":[\"$\",\"div\",null,{\"className\":\"Sidebar_stat__1kZov\",\"children\":[[\"$\",\"$L16\",null,{\"href\":\"https://github.com/juhwannn?tab=followers\",\"children\":[[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"className\":\"Sidebar_icon__K7qWf\",\"children\":[\"$undefined\",[[\"$\",\"circle\",\"0\",{\"cx\":\"152\",\"cy\":\"184\",\"r\":\"72\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M234 296c-28.16-14.3-59.24-20-82-20-44.58 0-136 27.34-136 82v42h150v-16.07c0-19 8-38.05 22-53.93 11.17-12.68 26.81-24.45 46-34z\",\"children\":[]}],[\"$\",\"path\",\"2\",{\"d\":\"M340 288c-52.07 0-156 32.16-156 96v48h312v-48c0-63.84-103.93-96-156-96z\",\"children\":[]}],[\"$\",\"circle\",\"3\",{\"cx\":\"340\",\"cy\":\"168\",\"r\":\"88\",\"children\":[]}]]],\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}],[\"$\",\"span\",null,{\"children\":[10,\" followers\"]}],\" \"]}],\"  ·  \",[\"$\",\"$L16\",null,{\"href\":\"https://github.com/juhwannn?tab=following\",\"children\":[\"$\",\"span\",null,{\"children\":[20,\" following\"]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"Sidebar_section__yg6jC\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"Sidebar_section-title__7I2dP\",\"children\":\"Projects\"}],[\"$\",\"div\",null,{\"className\":\"Sidebar_tags__AgF5p\",\"children\":\"프로젝트 목록....\"}]]}],[\"$\",\"div\",null,{\"className\":\"Sidebar_section__yg6jC\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"Sidebar_section-title__7I2dP\",\"children\":\"Categories\"}],[\"$\",\"div\",null,{\"className\":\"Sidebar_tags__AgF5p\",\"children\":[[\"$\",\"$L16\",\"next.js\",{\"href\":\"/tags/next.js\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"next.js\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":5}]]}],[\"$\",\"$L16\",\"express\",{\"href\":\"/tags/express\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"express\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":5}]]}],[\"$\",\"$L16\",\"Discord Bot\",{\"href\":\"/tags/Discord Bot\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"Discord Bot\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":3}]]}],[\"$\",\"$L16\",\"react native\",{\"href\":\"/tags/react native\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"react native\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":3}]]}],[\"$\",\"$L16\",\"node.js\",{\"href\":\"/tags/node.js\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"node.js\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":3}]]}],[\"$\",\"$L16\",\"React\",{\"href\":\"/tags/React\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"React\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":3}]]}],[\"$\",\"$L16\",\"docker\",{\"href\":\"/tags/docker\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"docker\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":2}]]}],[\"$\",\"$L16\",\"Devlog\",{\"href\":\"/tags/Devlog\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"Devlog\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":2}]]}],[\"$\",\"$L16\",\"express.js\",{\"href\":\"/tags/express.js\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"express.js\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":2}]]}],[\"$\",\"$L16\",\"bot\",{\"href\":\"/tags/bot\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"bot\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":2}]]}],[\"$\",\"$L16\",\"CentOS8\",{\"href\":\"/tags/CentOS8\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"CentOS8\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":2}]]}],[\"$\",\"$L16\",\"회고\",{\"href\":\"/tags/회고\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"회고\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"Boilerplate\",{\"href\":\"/tags/Boilerplate\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"Boilerplate\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"Swagger\",{\"href\":\"/tags/Swagger\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"Swagger\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"Lv1\",{\"href\":\"/tags/Lv1\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"Lv1\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"styled components\",{\"href\":\"/tags/styled components\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"styled components\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"JavaScript\",{\"href\":\"/tags/JavaScript\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"JavaScript\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"marked\",{\"href\":\"/tags/marked\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"marked\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"static ip\",{\"href\":\"/tags/static ip\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"static ip\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"AWS S3\",{\"href\":\"/tags/AWS S3\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"AWS S3\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"mac\",{\"href\":\"/tags/mac\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"mac\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"createGlobalStyle\",{\"href\":\"/tags/createGlobalStyle\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"createGlobalStyle\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"useState\",{\"href\":\"/tags/useState\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"useState\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"react hook\",{\"href\":\"/tags/react hook\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"react hook\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"github\",{\"href\":\"/tags/github\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"github\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"Markdown\",{\"href\":\"/tags/Markdown\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"Markdown\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"computer science\",{\"href\":\"/tags/computer science\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"computer science\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"load balancer\",{\"href\":\"/tags/load balancer\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"load balancer\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"프로그래머스\",{\"href\":\"/tags/프로그래머스\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"프로그래머스\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"마크다운\",{\"href\":\"/tags/마크다운\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"마크다운\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"package.json\",{\"href\":\"/tags/package.json\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"package.json\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"Centos Stream\",{\"href\":\"/tags/Centos Stream\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"Centos Stream\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"IntelliJ\",{\"href\":\"/tags/IntelliJ\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"IntelliJ\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"ecs\",{\"href\":\"/tags/ecs\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"ecs\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"next-i18next\",{\"href\":\"/tags/next-i18next\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"next-i18next\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"outbound\",{\"href\":\"/tags/outbound\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"outbound\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"Fargate\",{\"href\":\"/tags/Fargate\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"Fargate\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"migration\",{\"href\":\"/tags/migration\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"migration\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"vue\",{\"href\":\"/tags/vue\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"vue\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"discord\",{\"href\":\"/tags/discord\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"discord\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"npx\",{\"href\":\"/tags/npx\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"npx\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"s\",{\"href\":\"/tags/s\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"s\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"스킬체크\",{\"href\":\"/tags/스킬체크\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"스킬체크\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"package\",{\"href\":\"/tags/package\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"package\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"ThemeProvider\",{\"href\":\"/tags/ThemeProvider\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"ThemeProvider\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"개발 블로그\",{\"href\":\"/tags/개발 블로그\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"개발 블로그\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"swagger-js\",{\"href\":\"/tags/swagger-js\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"swagger-js\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"라우팅\",{\"href\":\"/tags/라우팅\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"라우팅\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"clone coding\",{\"href\":\"/tags/clone coding\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"clone coding\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"미들웨어\",{\"href\":\"/tags/미들웨어\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"미들웨어\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"바닐라 자바스크립트\",{\"href\":\"/tags/바닐라 자바스크립트\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"바닐라 자바스크립트\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"aws\",{\"href\":\"/tags/aws\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"aws\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"비제어 컴포넌트\",{\"href\":\"/tags/비제어 컴포넌트\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"비제어 컴포넌트\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"에뮬레이터\",{\"href\":\"/tags/에뮬레이터\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"에뮬레이터\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"spa\",{\"href\":\"/tags/spa\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"spa\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"asdf\",{\"href\":\"/tags/asdf\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"asdf\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"제어 컴포넌트\",{\"href\":\"/tags/제어 컴포넌트\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"제어 컴포넌트\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"npm\",{\"href\":\"/tags/npm\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"npm\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"velog\",{\"href\":\"/tags/velog\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"velog\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"centos\",{\"href\":\"/tags/centos\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"centos\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"SSR\",{\"href\":\"/tags/SSR\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"SSR\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"CS\",{\"href\":\"/tags/CS\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"CS\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"react-native-camera-kit\",{\"href\":\"/tags/react-native-camera-kit\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"react-native-camera-kit\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}],[\"$\",\"$L16\",\"asadf asd\",{\"href\":\"/tags/asadf asd\",\"className\":\"Sidebar_tag__lqPN7\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Sidebar_tag-name__zMWH2\",\"children\":\"asadf asd\"}],[\"$\",\"span\",null,{\"className\":\"counter\",\"children\":1}]]}]]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"18:Tcab,"])</script><script>self.__next_f.push([1,"React 공식문서를 보면 제어 컴포넌트와 비제어 컴포넌트에 관한 얘기가 나온다.\u003cbr /\u003e\u003cbr /\u003e\u003ch2 id=\"제어 컴포넌트\"\u003e제어 컴포넌트\u003c/h2\u003e\u003cbr /\u003e\u003e\u003cbr /\u003eHTML에서 `\u003cinput\u003e, \u003ctextarea\u003e, \u003cselect\u003e`와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.\u003cbr /\u003e\u003e\u003cbr /\u003e우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다.\u003cbr /\u003e\u003cbr /\u003e출처 : https://ko.reactjs.org/docs/forms.html#controlled-components\u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003e말이 좀 어려울 수 있긴하지만 중요한 부분은 \u003cbr /\u003e\u003e\"엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다.\"\u003cbr /\u003e\u003cbr /\u003e이부분이다.\u003cbr /\u003e\u003cbr /\u003e\u003cbr/\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cpre\u003e\u003ccode\u003ejavascript\u003cbr /\u003eimport styled from \"styled-components\";\u003cbr /\u003eimport React, {useState} from \"react\";\u003cbr /\u003e\u003cbr /\u003econst Root = styled.div`\u003cbr /\u003e\u003cbr /\u003e`;\u003cbr /\u003e\u003cbr /\u003eexport default function Home() {\u003cbr /\u003e\u003cbr /\u003e const [input, setInput] = useState('');\u003cbr /\u003e\u003cbr /\u003e const onChangeHandle = (e) =\u003e {\u003cbr /\u003e setInput(e.target.value);\u003cbr /\u003e console.log(\"input : \" + input);\u003cbr /\u003e }\u003cbr /\u003e\u003cbr /\u003e return (\u003cbr /\u003e \u003cRoot\u003e\u003cbr /\u003e \u003cinput\u003cbr /\u003e onChange={e =\u003e onChangeHandle(e)}\u003cbr /\u003e value={input}\u003cbr /\u003e /\u003e\u003cbr /\u003e \u003c/Root\u003e\u003cbr /\u003e )\u003cbr /\u003e}\u003cbr /\u003e\u003c/code\u003e\u003c/pre\u003e\u003cbr /\u003e\u003cbr /\u003e쉽게 설명하자면 위의 코드에서 input 창에 abcdef 를 입력하면 아래 사진처럼 input 값이 변경 될 때마다 input state 값이 업데이트 되는것이다.\u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003e제어컴포넌트의 쓰임새는 주로 \u003cstrong\u003e유효성검사\u003c/strong\u003e에 많이 쓰인다.\u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003e\u003ch2 id=\"비제어 컴포넌트\"\u003e비제어 컴포넌트\u003c/h2\u003e\u003cbr /\u003e\u003cbr /\u003e제어 컴포넌트에서 데이터는 React 컴포넌트에서 데이터가 다뤄지는거에 반해 비제어 컴포넌트는 DOM 자체에서 폼 데이터가 다루어진다. \u003cbr /\u003e\u003cbr /\u003e비제어 컴포넌트에서는 버튼을 누르는 최종적인 상황에서만 input의 value에 접근하므로 리렌더링이 계속해서 발생하진 않는다. 하지만 그만큼 비제어 컴포넌트는 사용자 입력의 가장 최신 값에 접근하기 힘들다는 특성이 있다.\u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003e\u003ch2 id=\"결론\"\u003e결론\u003c/h2\u003e\u003cbr /\u003e제어 컴포넌트와 비제어 컴포넌트중에 뭐가 좋다 나쁘다의 문제가 아니고 적절한 곳에 맞춰서 사용을 하면 된다.\u003cbr /\u003e \u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003e"])</script><script>self.__next_f.push([1,"8:[\"$\",\"main\",null,{\"className\":\"post_main__FgxZ8\",\"children\":[\"$\",\"div\",null,{\"className\":\"post_container__6FKuG\",\"children\":[[\"$\",\"div\",null,{\"className\":\"post_content__xaD0P\",\"children\":[[\"$\",\"div\",null,{\"className\":\"post_header__gbkW8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"$undefined\",\"children\":[[\"$\",\"$L16\",null,{\"href\":\"/posts\",\"children\":\"Posts\"}],\" / \",[\"$\",\"span\",null,{\"children\":\"[React] 제어 컴포넌트 / 비제어 컴포넌트\"}]]}],[\"$\",\"h1\",null,{\"className\":\"post_title__yPHZE\",\"children\":\"[React] 제어 컴포넌트 / 비제어 컴포넌트\"}],[\"$\",\"div\",null,{\"className\":\"post_meta__oxbjT\",\"children\":[[\"$\",\"div\",null,{\"className\":\"post_tags__B6TRi\",\"children\":[[\"$\",\"$L16\",\"React\",{\"href\":\"/tags/React\",\"className\":\"Tag_tag__sIaBr\",\"children\":\"React\"}],[\"$\",\"$L16\",\"비제어 컴포넌트\",{\"href\":\"/tags/비제어 컴포넌트\",\"className\":\"Tag_tag__sIaBr\",\"children\":\"비제어 컴포넌트\"}],[\"$\",\"$L16\",\"제어 컴포넌트\",{\"href\":\"/tags/제어 컴포넌트\",\"className\":\"Tag_tag__sIaBr\",\"children\":\"제어 컴포넌트\"}]]}],[\"$\",\"div\",null,{\"className\":\"post_date__Q0qFj\",\"children\":[[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"className\":\"post_icon__CVyhb\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"fill\":\"none\",\"d\":\"M0 0h24v24H0z\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\",\"children\":[]}]]],\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}],[\"$\",\"span\",null,{\"children\":[\"Updated on \",\"2025. 12. 18. 오후 9:40\"]}]]}]]}]]}],[\"$\",\"div\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"MarkdownViewer_markdown-body__0HboX\",\"dangerouslySetInnerHTML\":{\"__html\":\"$18\"}}]}]]}],[\"$\",\"aside\",null,{\"className\":\"post_toc__ia6Cm\",\"children\":[[\"$\",\"h2\",null,{\"children\":\"Table of Contents\"}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",\"0\",{\"className\":\"post_toc-level-2__6xmZI\",\"children\":[\"$\",\"a\",null,{\"href\":\"#제어 컴포넌트\",\"children\":\"제어 컴포넌트\"}]}],[\"$\",\"li\",\"1\",{\"className\":\"post_toc-level-2__6xmZI\",\"children\":[\"$\",\"a\",null,{\"href\":\"#비제어 컴포넌트\",\"children\":\"비제어 컴포넌트\"}]}],[\"$\",\"li\",\"2\",{\"className\":\"post_toc-level-2__6xmZI\",\"children\":[\"$\",\"a\",null,{\"href\":\"#결론\",\"children\":\"결론\"}]}]]}]]}]]}]}]\n"])</script></body></html>