{"id":961,"date":"2025-06-24T00:44:43","date_gmt":"2025-06-23T15:44:43","guid":{"rendered":"https:\/\/nangchang.nes.or.kr\/?p=961"},"modified":"2025-06-24T00:44:47","modified_gmt":"2025-06-23T15:44:47","slug":"react-%eb%a6%ac%ec%95%a1%ed%8a%b8-%ec%bb%b4%ed%8f%ac%eb%84%8c%ed%8a%b8-%eb%b6%84%eb%a6%ac%ec%99%80-props-%ec%a0%84%eb%8b%ac%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/nangchang.nes.or.kr\/?p=961","title":{"rendered":"[React]  \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 \ubd84\ub9ac\uc640 props \uc804\ub2ec\ud558\uae30"},"content":{"rendered":"\n<p>\ucc98\uc74c\uc5d0\ub294 \ubaa8\ub4e0 \ucf54\ub4dc\ub97c \ud55c \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub123\uac8c \ub418\uc9c0\ub9cc, \uaddc\ubaa8\uac00 \ucee4\uc9c8\uc218\ub85d \ucf54\ub4dc\ub97c <strong>\ucabc\uac1c\ub294 \uac83<\/strong>\uc774 \uc911\uc694\ud574\uc9d1\ub2c8\ub2e4.<br>\ub9ac\uc561\ud2b8\ub294 UI\ub97c \uc791\uace0 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ub2e8\uc704\uc778 <strong>\ucef4\ud3ec\ub10c\ud2b8(Component)<\/strong>\ub85c \ub098\ub204\ub294 \uac83\uc744 \uae30\ubcf8\uc73c\ub85c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc774\ubc88 \uae00\uc5d0\uc11c\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub098\ub204\ub294 \ubc29\ubc95\uacfc <strong>\ub370\uc774\ud130\ub97c \uc804\ub2ec\ud558\ub294 props<\/strong>\uc758 \uac1c\ub150\uc744 \uc27d\uac8c \uc124\uba85\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">1. \u2702\ufe0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ucabc\uac1c\ub294 \uc774\uc720<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud55c \ud30c\uc77c\uc5d0 \ub108\ubb34 \ub9ce\uc740 \ucf54\ub4dc\uac00 \uc788\uc73c\uba74 \uc720\uc9c0\ubcf4\uc218\uac00 \uc5b4\ub824\uc6cc\uc694<\/li>\n\n\n\n<li>UI\uc758 \ubc18\ubcf5\ub418\ub294 \ubd80\ubd84\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub9cc\ub4e4\uc5b4 <strong>\uc7ac\uc0ac\uc6a9<\/strong>\ud560 \uc218 \uc788\uc5b4\uc694<\/li>\n<\/ul>\n\n\n\n<p>\uc608\ub97c \ub4e4\uc5b4, \uc5ec\ub7ec \uc0ac\uc6a9\uc790 \uc774\ub984\uc744 \ucd9c\ub825\ud558\ub294 \uacbd\uc6b0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">function User({ name }) {\n  return &lt;p&gt;\uc548\ub155\ud558\uc138\uc694, {name}\ub2d8!&lt;\/p&gt;;\n}\n<\/code><\/pre>\n\n\n\n<p><code>User<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc774\ub984\ub9cc \ubc14\uafd4\uc11c \ubc18\ubcf5\ud574\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc8e0!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2. \ud83d\udce6 props\ub780?<\/h3>\n\n\n\n<p><code>props<\/code>\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 <strong>\ub370\uc774\ud130\ub97c \uc804\ub2ec\ud558\uae30 \uc704\ud55c \uac12<\/strong>\uc785\ub2c8\ub2e4. \ubd80\ubaa8 \u2192 \uc790\uc2dd \ubc29\ud5a5\uc73c\ub85c\ub9cc \uc804\ub2ec\ub418\uba70, \uc790\uc2dd\uc740 props\ub97c <strong>\uc77d\uae30\ub9cc<\/strong> \ud560 \uc218 \uc788\uc5b4\uc694.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">function Greeting({ name }) {\n  return &lt;h2&gt;\ubc18\uac00\uc6cc\uc694, {name}\ub2d8!&lt;\/h2&gt;;\n}\n\nfunction App() {\n  return (\n    &lt;div&gt;\n      &lt;Greeting name=\"\uc9c0\uc218\" \/&gt;\n      &lt;Greeting name=\"\ubbfc\ud638\" \/&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>\ud83d\udca1 \uc704 \ucf54\ub4dc\uc5d0\uc11c <code>name=\"\uc9c0\uc218\"<\/code>\ub294 Greeting \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc804\ub2ec\ub418\ub294 props\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3. \ud83e\udde0 props\ub97c \uc5ec\ub7ec \uac1c \uc804\ub2ec\ud560 \uc218\ub3c4 \uc788\uc5b4\uc694<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">function Product({ name, price }) {\n  return &lt;p&gt;{name} : {price}\uc6d0&lt;\/p&gt;;\n}\n\nfunction App() {\n  return (\n    &lt;div&gt;\n      &lt;Product name=\"\ub178\ud2b8\ubd81\" price={1500000} \/&gt;\n      &lt;Product name=\"\ub9c8\uc6b0\uc2a4\" price={25000} \/&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>\ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc5ec\ub7ec \uac1c\uc758 \uac12\uc744 \ud55c\uaebc\ubc88\uc5d0 \uc804\ub2ec\ud558\uace0, \uac01\uac01 \ud654\uba74\uc5d0 \ucd9c\ub825\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udccc \uc815\ub9ac<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>UI\ub97c \uc791\uac8c \ub098\ub204\uba74 \ucf54\ub4dc\uac00 \ub354 <strong>\uae54\ub054\ud558\uace0 \uc720\uc9c0\ubcf4\uc218 \uc26c\uc6b4 \uad6c\uc870<\/strong>\uac00 \ub429\ub2c8\ub2e4<\/li>\n\n\n\n<li><strong>props\ub294 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc790\uc2dd\uc5d0\uac8c \uc8fc\ub294 \ub370\uc774\ud130<\/strong>\uc785\ub2c8\ub2e4<\/li>\n\n\n\n<li>\uc790\uc2dd\uc740 props\ub97c <strong>\uc77d\uae30\ub9cc \uac00\ub2a5<\/strong>\ud558\uba70, \uc9c1\uc811 \ubc14\uafc0 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\uddbc\ufe0f \ucef4\ud3ec\ub10c\ud2b8\uc640 props \uc804\ub2ec \ud750\ub984\ub3c4<\/h3>\n\n\n\n<p>\uc544\ub798 \uadf8\ub9bc\uc740 \ubd80\ubaa8 \u2192 \uc790\uc2dd\uc73c\ub85c props\uac00 \uc804\ub2ec\ub418\uace0, \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc774\ub97c \uc0ac\uc6a9\ud558\ub294 \uacfc\uc815\uc744 \ub098\ud0c0\ub0c5\ub2c8\ub2e4:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-7.png\" alt=\"\" class=\"wp-image-962\" width=\"471\" height=\"471\" srcset=\"https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-7.png 1024w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-7-300x300.png 300w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-7-150x150.png 150w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-7-768x768.png 768w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-7-624x624.png 624w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ucc98\uc74c\uc5d0\ub294 \ubaa8\ub4e0 \ucf54\ub4dc\ub97c \ud55c \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub123\uac8c \ub418\uc9c0\ub9cc, \uaddc\ubaa8\uac00 \ucee4\uc9c8\uc218\ub85d \ucf54\ub4dc\ub97c \ucabc\uac1c\ub294 \uac83\uc774 \uc911\uc694\ud574\uc9d1\ub2c8\ub2e4.\ub9ac\uc561\ud2b8\ub294 UI\ub97c \uc791\uace0 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ub2e8\uc704\uc778 \ucef4\ud3ec\ub10c\ud2b8(Component)\ub85c \ub098\ub204\ub294 \uac83\uc744 \uae30\ubcf8\uc73c\ub85c \ud569\ub2c8\ub2e4. \uc774\ubc88 \uae00\uc5d0\uc11c\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub098\ub204\ub294 \ubc29\ubc95\uacfc \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud558\ub294 props\uc758 \uac1c\ub150\uc744 \uc27d\uac8c \uc124\uba85\ud569\ub2c8\ub2e4. 1. \u2702\ufe0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ucabc\uac1c\ub294 \uc774\uc720 \uc608\ub97c \ub4e4\uc5b4, \uc5ec\ub7ec \uc0ac\uc6a9\uc790 \uc774\ub984\uc744 \ucd9c\ub825\ud558\ub294 \uacbd\uc6b0: User \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc774\ub984\ub9cc \ubc14\uafd4\uc11c \ubc18\ubcf5\ud574\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc8e0! 2. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-961","post","type-post","status-publish","format-standard","hentry","category-1"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=961"}],"version-history":[{"count":1,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/961\/revisions"}],"predecessor-version":[{"id":963,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/961\/revisions\/963"}],"wp:attachment":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}