{"id":94,"date":"2025-07-16T14:55:20","date_gmt":"2025-07-16T05:55:20","guid":{"rendered":"http:\/\/34.64.61.65\/?p=94"},"modified":"2025-07-16T15:16:44","modified_gmt":"2025-07-16T06:16:44","slug":"__trashed-4","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=94","title":{"rendered":"React props"},"content":{"rendered":"\n<ol class=\"wp-block-list\">\n<li>\ud504\ub85c\ud37c\ud2f0(properties, props)<\/li>\n<\/ol>\n\n\n\n<p>\uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uac12\uc744 \uc804\ub2ec\ud560 \ub54c \uc0ac\uc6a9(\ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984).<\/p>\n\n\n\n<p>\ud504\ub85c\ud37c\ud2f0 \uac12\uc740&nbsp;<strong>\uc218\uc815 \ubd88\uac00\ub2a5<\/strong>, \uc989&nbsp;<strong>\uc77d\uae30 \uc804\uc6a9<\/strong>&nbsp;\ub370\uc774\ud130.<\/p>\n\n\n\n<p>1) \uc0ac\uc6a9\ubc95<\/p>\n\n\n\n<p>\uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c Props\ub97c \uc9c0\uc815\ud558\uace0 \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \ubc1b\uc740 Props \uac12\uc744 \ub80c\ub354\ub9c1.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ubb38\uc790\uc5f4 \uc804\ub2ec: \ud070 \ub530\uc634\ud45c(&#8221; &#8220;) \uc0ac\uc6a9<\/li>\n\n\n\n<li>\uc22b\uc790\ud615, boolean \ub4f1\uc758 \uac12(\ubb38\uc790\uc5f4 \uc678\uc758 \uac12) \uc804\ub2ec: \uc911\uad04\ud638( { } ) \uc0ac\uc6a9<\/li>\n<\/ul>\n\n\n\n<p>(1) \ub2e8\uc77c\uac12 \uc804\ub2ec<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>App.js<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport Hello from \"..\/src\/Hello\";\n\nfunction App() {\n    return (\n            &lt;Hello name=\"React\"&gt;&lt;\/Hello&gt;\/\/\uc0ac\uc6a9\ud560 \ucef4\ud3ec\ub10c\ud2b8 props\uc758 name \uac12\uc744 \"React\"\ub85c\n        );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Header.js<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\n\nfunction Hello(props) {\n    return &lt;div&gt;Hello, {props.name}&lt;\/div&gt;;\/\/ name \uac12\uc744 \uc870\ud68c\ud558\uae30 \uc704\ud574 props.name \uc774\uc6a9.\n}\n\nexport default Hello;<\/code><\/pre>\n\n\n\n<p>(2) \uc5ec\ub7ec\uac12 \uc804\ub2ec<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>App.js<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport Hello from '..\/src\/Hello';\n\nfunction App() {\n    return (\n            &lt;Hello name=\"React\" color=\"blue\"\/&gt;\n        );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hello.js<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\n\nfunction Hello(props){\n    return(\n            &lt;div style={{ color: props.color }}&gt;Hello, {props.name}&lt;\/div&gt;\n        );\n}\n\nexport default Hello;<\/code><\/pre>\n\n\n\n<p>\uc774\ub7f0 \uacbd\uc6b0 \uac1d\uccb4\uac12\uc744 \ubd80\ub97c \ub54c\ub9c8\ub2e4 \ub9e4\ubc88 props\uc5d0\uc11c \ubd88\ub7ec\uc640\uc57c \ud568.<\/p>\n\n\n\n<p>\ube44\uad6c\uc870\ud654 \ud560\ub2f9 \ubc29\uc2dd\uc73c\ub85c \ucf54\ub4dc\ub97c \ubc14\uafb8\uba74:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\n\nfunction Hello({name, color}){\n    return(\n            &lt;div style={{ color: color }}&gt;Hello, {name}&lt;\/div&gt;\/\/\ub3d9\uc77c\ud558\uac8c &lt;div style={{ color }}Hello, {name}&lt;\/div&gt;\n        );\n}\n\nexport default Hello;<\/code><\/pre>\n\n\n\n<p>(3) \uae30\ubcf8\uac12 \uc124\uc815: defaultProps<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hello.js<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\n\nfunction Hello( {color, name} ) {\n    return &lt;div style={{ color }}&gt;Hello, {name}&lt;\/div&gt;;\n}\n\nHello.defaultProps = {\n    name: 'noname'\/\/defaultProps\ub85c \uae30\ubcf8\uac12 \uc124\uc815.\n}\n\nexport default Hello;<\/code><\/pre>\n\n\n\n<p>(4) \ucef4\ud3ec\ub10c\ud2b8 \ud0dc\uadf8 \ub0b4\ubd80\uc758 \uac12 \uc870\ud68c: props.children<\/p>\n\n\n\n<p>\uc608\ub97c \ub4e4\uc5b4, \uc2a4\ud0c0\uc77c \uc815\uc758\ub41c \ud30c\uc77c Wrapper.js\ub97c App.js\uc758 \ucef4\ud37c\ub10c\ud2b8\ub85c \ucd94\uac00\ud55c\ub2e4\uba74,<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wrapper.js<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \"react\";\n\nfunction Wrapper() {\n    const style = {\n        border: '2px solid black',\n        padding: 20\n    };\n    return &lt;div style={style}&gt;&lt;div&gt;\n}\n\nexport default Wrapper;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>App.js<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \"react\";\nimport Hello from \".\/Hello\";\nimport Wrapper from \".\/Wrapper\";\n\nfunction App() {\n    return (\n        &lt;Wrapper&gt;\n            &lt;Hello name=\"React\" color=\"blue\"&gt;&lt;\/Header&gt;\n        &lt;\/Wraaper&gt;\n    );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<p>\ud558\uc9c0\ub9cc \uc774\ub807\uac8c \uc791\uc131\ub41c Wrapper \ucef4\ud3ec\ub10c\ud2b8\ub97c App.js\uc5d0 \ucd94\uac00\ud558\uba74 Wrapper \ud0dc\uadf8 \ub0b4\ubd80\uc5d0\uc11c \uc791\uc131\ud55c \uac12\ub4e4\uc744 \ucd9c\ub825 X<\/p>\n\n\n\n<p>\uc774\ub7f4 \ub54c, {children}\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud0dc\uadf8 \ub0b4\ubd80\ub97c \ubcf4\uc774\ub3c4\ub85d \ub9cc\ub4e4\uc5b4\uc8fc\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n\n\n\n<p>\ub530\ub77c\uc11c Wrapper.js\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud55c\ub2e4:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wrapper.js<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\n\nfunction Wrapper({ children }) {\n    const style = {\n        border: '2px solid black',\n        padding: 20\n    };\n\n    return (\n        &lt;div style={style}&gt;\n            {children}\n        &lt;\/div&gt;\n    )\n}\n\nexport default Wrapper;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uac12\uc744 \uc804\ub2ec\ud560 \ub54c \uc0ac\uc6a9(\ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984). \ud504\ub85c\ud37c\ud2f0 \uac12\uc740&nbsp;\uc218\uc815 \ubd88\uac00\ub2a5, \uc989&nbsp;\uc77d\uae30 \uc804\uc6a9&nbsp;\ub370\uc774\ud130. 1) \uc0ac\uc6a9\ubc95 \uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c Props\ub97c \uc9c0\uc815\ud558\uace0 \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \ubc1b\uc740 Props \uac12\uc744 \ub80c\ub354\ub9c1. (1) \ub2e8\uc77c\uac12 \uc804\ub2ec (2) \uc5ec\ub7ec\uac12 \uc804\ub2ec \uc774\ub7f0 \uacbd\uc6b0 \uac1d\uccb4\uac12\uc744 \ubd80\ub97c \ub54c\ub9c8\ub2e4 \ub9e4\ubc88 props\uc5d0\uc11c \ubd88\ub7ec\uc640\uc57c \ud568. \ube44\uad6c\uc870\ud654 \ud560\ub2f9 \ubc29\uc2dd\uc73c\ub85c \ucf54\ub4dc\ub97c \ubc14\uafb8\uba74: (3) \uae30\ubcf8\uac12 \uc124\uc815: defaultProps (4) \ucef4\ud3ec\ub10c\ud2b8 \ud0dc\uadf8 \ub0b4\ubd80\uc758 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[100,102,101],"class_list":["post-94","post","type-post","status-publish","format-standard","hentry","category-react","tag-react","tag-react-js","tag-101"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/94","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=94"}],"version-history":[{"count":2,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/94\/revisions"}],"predecessor-version":[{"id":152,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/94\/revisions\/152"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=94"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=94"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}