{"id":164,"date":"2026-06-26T13:33:07","date_gmt":"2026-06-26T13:33:07","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=164"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"%ec%bb%b4%ed%8f%ac%eb%84%8c%ed%8a%b8-2","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=164","title":{"rendered":"\ucef4\ud3ec\ub10c\ud2b8"},"content":{"rendered":"<p>\ud83d\udd17<a href=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/03\/src.zip\"><strong>\uc720\ud29c\ube0c \uac15\uc758 \uc644\uc131\ucf54\ub4dc<\/strong><\/a><\/p>\n<hr>\n<h2><strong>1. \uc601\uc0c1\ubcf4\uae30<\/strong><\/h2>\n<p><video controls width=\"100%\"><source src=\"https:\/\/youtu.be\/mZc6X6LR1IA\" type=\"video\/mp4\" \/><\/video><\/p>\n<h3><strong>1-2. \ucef4\ud3ec\ub10c\ud2b8\uc640 \ud504\ub86d\uc2a4\ub780?<\/strong><\/h3>\n<blockquote>\n<p><strong>component: \ub450\ubc88\uc774\uc0c1 \uc0ac\uc6a9\ub418\ub294 UI \uc694\uc18c\ub97c \uc0ac\uc6a9\uc790\uc815\uc758 \ud0dc\uadf8\ub85c \ub9cc\ub4e4\uc5b4 \uc0ac\uc6a9\ud558\ub294 \uac83<br \/>\nprops: \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc804\ub2ec\ud558\ub294 \ub370\uc774\ud130<\/strong><\/p>\n<\/blockquote>\n<h2><strong>2. App.js \ud30c\uc77c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc815\uc758 \uc54c\uc544\ubcf4\uae30<\/strong><\/h2>\n<ul>\n<li>.\/src\/App.js \ud30c\uc77c\uc744 \uc5f4\uace0 App() \ud568\uc218\uc640 App() \ud568\uc218\uac00 \ubc18\ud658\ud558\ub294 \uac12\uc744 \ubcf4\uc790.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\n\nfunction App() {\n\t\/\/App() \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud588\uace0,\n\treturn (\n\t\t\/\/ App \ucef4\ud3ec\ub10c\ud2b8\ub294 HTML\uc744 \ubc18\ud658\ud558\uace0 \uc788\ub2e4.\n\t\t&lt;div&gt;\n\t\t\t&lt;h1&gt;Hello&lt;\/h1&gt;\n\t\t&lt;\/div&gt;);\n}\n\nexport default App;\n<\/code><\/pre>\n<ul>\n<li>App() \ud568\uc218\uac00 \uc815\uc758\ub418\uc5b4 \uc788\uace0, \uc774 \ud568\uc218\uac00\u00a0<code>&lt;div&gt;<\/code><br \/>\n<h1><code>Hello<\/code><\/h1>\n<p><code>&lt;\/div&gt;<\/code>\ub97c \ubc18\ud658\ud558\uace0 \uc788\ub2e4.<\/li>\n<li>\ubc14\ub85c App \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud55c \uac83\uc774\ub2e4.<\/li>\n<li>App() \ud568\uc218\uac00 \ubc18\ud658\ud55c HTML\uc774 \ub9ac\uc561\ud2b8 \uc571 \ud654\uba74\uc5d0 \uadf8\ub824\uc9c0\ub294 \uac83\uc774\ub2e4.<\/li>\n<\/ul>\n<h2><strong>3. index.js \ud30c\uc77c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0ac\uc6a9 \uc54c\uc544\ubcf4\uae30<\/strong><\/h2>\n<ul>\n<li><code>.\/src\/index.js<\/code>\u00a0\ud30c\uc77c\uc744 \uc5f4\uace0\u00a0\uc774\ub77c\uace0 \uc785\ub825\ud55c \ub0b4\uc6a9\uc5d0 \uc9d1\uc911\ud574 \ubcf4\uc790.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\nimport ReactDOM from &#39;react-dom\/client&#39;;\nimport &#39;.\/index.css&#39;;\nimport App from &#39;.\/App&#39;;\nimport reportWebVitals from &#39;.\/reportWebVitals&#39;;\n\nconst root = ReactDOM.createRoot(document.getElementById(&#39;orange&#39;));\nconsole.log(ReactDOM);\nroot.render(\n\t&lt;React.StrictMode&gt;\n\t\t&lt;App \/&gt;\n\t&lt;\/React.StrictMode&gt;);\n\n\/\/ If you want to start measuring performance in your app, pass a function\n\/\/ to log results (for example: reportWebVitals(console.log))\n\/\/ or send to an analytics endpoint. Learn more: https:\/\/bit.ly\/CRA-vitals\nreportWebVitals();\n<\/code><\/pre>\n<ul>\n<li>App \ucef4\ud3ec\ub10c\ud2b8\u00a0\uc0dd\uae40\uc0c8\uac00 \ub9c8\uce58 HTML \ud0dc\uadf8 \uac19\ub2e4.\ud558\uc9c0\ub9cc HTML\uc5d0\ub294\u00a0<code>&lt;App \/&gt;<\/code>\uc774\ub77c\uace0 \uc0dd\uae34 \ud0dc\uadf8\uac00 \uc5c6\ub2e4.\uc2e4\uc81c\ub85c\u00a0<code>&lt;App \/&gt;<\/code>\ub294 HTML \ud0dc\uadf8\uac00 \uc544\ub2c8\uae30\ub3c4 \ud558\ub2e4.<\/li>\n<li>root.render() \uc758 \uc778\uc790\ub85c\u00a0<code>&lt;App \/&gt;<\/code>\uc744 \uc804\ub2ec\ud558\uba74 App \ucef4\ud3ec\ub10c\ud2b8\uac00 \ubc18\ud658\ud558\ub294 \uac83\ub4e4\uc744 \ud654\uba74\uc5d0 \uadf8\ub9b4 \uc218 \uc788\ub2e4.\uc544\uc774\ub514\uac00 root\uc778 \uc568\ub9ac\uba3c\ud2b8\ub294 public\/index.html\uc5d0 \uc815\uc758\ub418\uc5b4 \uc788\ub2e4.<\/li>\n<li>\ub9ac\uc561\ud2b8\ub294\u00a0<code>&lt;App \/&gt;<\/code>\uacfc \uac19\uc740 \ud45c\uc2dc\ub97c \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc778\uc2dd\ud558\uace0, \uadf8 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ubc18\ud658\ud558\ub294 \uac12\uc744 \ud654\uba74\uc5d0 \uadf8\ub824\uc900\ub2e4.\uadf8\ub798\uc11c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud560 \ub54c\u00a0<code>&lt;App \/&gt;<\/code>\uac00 \uc544\ub2c8\ub77c App\uc774\ub77c\uace0 \uc785\ub825\ud558\uba74 \uc624\ub958\uac00 \ubc1c\uc0dd\ud55c\ub2e4.<\/li>\n<li>\uc5ec\uae30\uc11c \uc9d1\uc911\ud560 \ub0b4\uc6a9\uc740 \ub9ac\uc561\ud2b8\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc640 \ud568\uaed8 \ub3d9\uc791\ud558\uace0, \ub9ac\uc561\ud2b8 \uc571\uc740 \ubaa8\ub450 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uad6c\uc131\ub41c\ub2e4.<\/li>\n<\/ul>\n<h2><strong>4. JSX \ubb38\ubc95 \uc54c\uc544\ubcf4\uae30<\/strong><\/h2>\n<blockquote>\n<p>\uc6b0\ub9ac\ub294 \uc544\uc9c1 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e0 \uc801\uc774 \uc5c6\ub2e4.<\/p>\n<\/blockquote>\n<p>  \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc5b4\ub5bb\uac8c \ub9cc\ub4e4\uae4c?<br \/>\n  \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc640 HTML\uc744 \uc870\ud569\ud55c<br \/>\n  <strong>JSX(Javascript XML\uc758 \uc57d\uc790\ub85c &#39;\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0 XML\uc744 \ucd94\uac00\ud55c \ud655\uc7a5\ud615 \ubb38\ubc95&#39;) <\/strong>\ub77c\ub294 \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud574\uc11c \ub9cc\ub4e0\ub2e4.<br \/>\n  JSX\ub294 HTML\uacfc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc870\ud569\ud55c \uac83\uc73c\ub85c \ubcc4\ub3c4\ub85c \ud559\uc2b5\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4.<br \/>\n  \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\ub2e4 \ubcf4\uba74 \uc790\uc5f0\uc2a4\ub7fd\uac8c JSX \ubb38\ubc95\uc744 \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ud574\uc57c \ud558\ub294\uc9c0 \uc54c\uac8c \ub41c\ub2e4.<\/p>\n<h3><strong>4.1. Orange \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/strong><\/h3>\n<ul>\n<li>src\/Orange.js\ub77c\ub294 \uc774\ub984\uc758 \uc0c8\ub85c\uc6b4 \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uc790.<\/li>\n<li>\ud30c\uc77c \uc774\ub984\uc5d0\uc11c \uccab \ubc88\uc9f8 \uae00\uc790\ub294 \ubc18\ub4dc\uc2dc \ub300\ubb38\uc790\ub85c \uc785\ub825\ud55c\ub2e4.<\/li>\n<li>\uadf8\ud6c4 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \uc785\ub825\ud55c\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\n<\/code><\/pre>\n<ul>\n<li>\uc774 \ucf54\ub4dc\ub294 \ub9ac\uc561\ud2b8 \ud328\ud0a4\uc9c0\ub85c \ubd80\ud130 \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4dc\ub294 \ubaa8\ub4c8\uc6b8 \ubd88\ub7ec\uc628\ub2e4\ub294 \uc758\ubbf8\uc774\ub2e4.<\/li>\n<li>react 18\ubc84\uc804 \uc774\ud6c4\ub85c \uc704\uc758 import \ub294 \uc0dd\ub7b5\uac00\ub2a5\ud558\ub2e4<\/li>\n<li>\ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\ub54c \ub54c\u00a0<strong>\uc911\uc694\ud55c \uaddc\uce59\uc740 \uc774\ub984\uc740 \ub300\ubb38\uc790\ub85c \uc2dc\uc791\ud574\uc57c \ud55c\ub2e4\ub294 \uc810<\/strong>\uc774\ub2e4.<\/li>\n<\/ul>\n<h3><strong>4.2. Orange \ucef4\ud3ec\ub10c\ud2b8 \uc791\uc131\ud558\uae30<\/strong><\/h3>\n<ul>\n<li>\ub2e4\uc74c\uacfc \uac19\uc774 Orange() \ud568\uc218\ub97c \uc791\uc131\ud574 \ubcf4\uc790.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\n\nconst Orange = () =&gt; {\n\treturn (\n\t\t&lt;h3&gt;Orange&lt;\/h3&gt; \/\/ HTML\uc774 \uc544\ub2c8\ub77c JSX\uc774\ub2e4.\n\t);\n};\n<\/code><\/pre>\n<ul>\n<li>Orange \ucef4\ud3ec\ub10c\ud2b8\uc758 \uae30\ubcf8 \ud2c0\uc774 \uc644\uc131\ub418\uc5c8\ub2e4.<\/li>\n<li>\uc774\uc81c \ucef4\ud3ec\ub10c\ud2b8\uac00 \ubc18\ud658\ud560 \uac12\uc744 \uc785\ub825\ud558\uba74 \ub41c\ub2e4. \uc774\ub54c \ucef4\ud3ec\ub10c\ud2b8\uac00 \ubc18\ud658\ud560 \uac12\uc740 JSX\ubb38\ubc95\uc73c\ub85c \uc791\uc131\ud55c\ub2e4.<\/li>\n<\/ul>\n<h3><strong>4.3. \ub9c8\uc9c0\ub9c9 \uc904\uc5d0 export default Orange;\ub97c \ucd94\uac00<\/strong><\/h3>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\n\nconst Orange = () =&gt; {\n\treturn (\n\t\t&lt;h3&gt;Orange&lt;\/h3&gt; \/\/ HTML\uc774 \uc544\ub2c8\ub77c JSX\uc774\ub2e4.\n\t);\n};\n\nexport default Orange;\n<\/code><\/pre>\n<ul>\n<li>export default Orange; \ub97c \ucd94\uac00\ud558\uba74 \ub2e4\ub978 \ud30c\uc77c\uc5d0\uc11c Orange \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/li>\n<li>\ucef4\ud3ec\ub10c\ud2b8\ub780 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c UI\ub97c \uc758\ubbf8\ud558\ubbc0\ub85c \uc774 \ud30c\uc77c\uc740 \ub2e4\ub978 \ud30c\uc77c\uc5d0\uc11c \uc5ec\ub7ec\ubc88 \ubd88\ub7ec\uc11c \uc0ac\uc6a9\ud55c\ub2e4\ub294 \uc758\ubbf8\uc774\ub2e4.<\/li>\n<li>\uadf8\ub807\uae30 \ub54c\ubb38\uc5d0 \ubc18\ub4dc\uc2dc \ub0b4\ubcf4\ub0b4\uae30\ub97c \ud574\uc57c\ud55c\ub2e4.<br \/>\n\uc774\uc81c \uc644\uc131\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud574 \ubcf4\uc790.<\/li>\n<\/ul>\n<h3><strong>4.4. Orange \ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc6a9\ud558\uae30<\/strong><\/h3>\n<ul>\n<li><del><code>&lt;React.StrictMode&gt;<\/code><\/del>\u00a0\ub97c \uc0ad\uc81c\ud6c4 \uc544\ub798\uc640 \uac19\uc774 Orange \ucef4\ud3ec\ub10c\ud2b8\ub97c \ucd94\uac00\ud55c\ub2e4.<\/li>\n<li>StrictMode \ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub0b4\uc758 \uc7a0\uc7ac\uc801\uc778 \ubb38\uc81c\ub97c \uc54c\uc544\ub0b4\uae30 \uc704\ud55c \ub3c4\uad6c\uc774\ub2e4.<br \/>\n\uc0ac\uc6a9\ud558\uba74 \uc88b\uc73c\ub098 \ucd08\uc2ec\uc790\uc758 \uac1c\ubc1c\ub2e8\uacc4\uc5d0\uc11c\ub294 \uc0ac\uc6a9\ud560 \uc77c\uc774 \uac70\uc758 \uc5c6\uc73c\ubbc0\ub85c \uc0ad\uc81c\ud55c\ub2e4.<br \/>\n\uc2e4\ubb34\uc5d0\uc11c\ub294 \uc0ac\uc6a9\ud558\ub294\uac83\uc744 \ucd94\ucc9c\ud55c\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\nimport ReactDOM from &#39;react-dom\/client&#39;;\nimport &#39;.\/index.css&#39;;\nimport App from &#39;.\/App&#39;;\nimport Orange from &#39;.\/Orange&#39;;\nimport reportWebVitals from &#39;.\/reportWebVitals&#39;;\n\nconst root = ReactDOM.createRoot(document.getElementById(&#39;orange&#39;));\nroot.render(\n\t  &lt;App \/&gt;&lt;Orange \/&gt;);\n\n\/\/ If you want to start measuring performance in your app, pass a function\n\/\/ to log results (for example: reportWebVitals(console.log))\n\/\/ or send to an analytics endpoint. Learn more: https:\/\/bit.ly\/CRA-vitals\nreportWebVitals();\n\n\n\n\n\n\n<\/code><\/pre>\n<h3><strong>4.5. index.js\ub97c \uc6d0\ub798\ub300\ub85c \ub3cc\ub824 \ub193\uc790.<\/strong><\/h3>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\nimport ReactDOM from &#39;react-dom\/client&#39;;\nimport &#39;.\/index.css&#39;;\nimport App from &#39;.\/App&#39;;\n~~import Orange from &#39;.\/Orange&#39;;~~\nimport reportWebVitals from &#39;.\/reportWebVitals&#39;;\n\nconst root = ReactDOM.createRoot(document.getElementById(&#39;root&#39;));\nroot.render(&lt;App \/&gt;);\n\n\/\/ If you want to start measuring performance in your app, pass a function\n\/\/ to log results (for example: reportWebVitals(console.log))\n\/\/ or send to an analytics endpoint. Learn more: https:\/\/bit.ly\/CRA-vitals\nreportWebVitals();\n<\/code><\/pre>\n<h3><strong>4.6. App.js \ud30c\uc77c\uc758 App \ucef4\ud3ec\ub10c\ud2b8\uc5d0 Orange \ucef4\ud3ec\ub10c\ud2b8 \uc784\ud3ec\ud2b8\ud558\uae30<\/strong><\/h3>\n<pre><code class=\"language-javascript\">import Orange from &#39;.\/Orange&#39;; \/\/\uac19\uc740 \uacbd\ub85c\uc758 Orange \ubaa8\ub4c8 \ub0b4 Orange \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubd88\ub7ec\uc634\nfunction App() {\n\treturn (\n\t\t&lt;div className=&#39;App&#39;&gt;\n\t\t\t&lt;h1&gt;HELLO&lt;\/h1&gt;\n\t\t\t&lt;Orange \/&gt;\n\t\t&lt;\/div&gt;);\n}\n\nexport default App;\n<\/code><\/pre>\n<ul>\n<li>\uc5ec\uae30\uae4c\uc9c0 \ud655\uc778\ud558\uba74 &#39;orange&#39;\uac00 \ucd9c\ub825\ub41c\ub2e4.<\/li>\n<\/ul>\n<h4><strong>4.7. \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c Orange \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0b4\ud3b4\ubcf4\uc790.<\/strong><\/h4>\n<ul>\n<li>\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 [Element] \ud0ed\uc744 \uc5f4\uc5b4 \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\uba74, \ub9ac\uc561\ud2b8\uac00\u00a0<code>&lt;Orange \/&gt;<\/code>\ub97c \ud574\uc11d\ud574\uc11c\ub85c \ud0dc\uadf8\ub85c \ub9cc\ub4e4\uc5c8\ub2e4.<br \/>\n\uc774\uac83\uc774 \ucef4\ud3ec\ub10c\ud2b8\uc640 JSX\uac00\u00a0\ub9ac\uc561\ud2b8\uc5d0\uc11c \ub3d9\uc791\ud558\ub294 \ubc29\uc2dd\uc774\ub2e4.<br \/>\n\ucef4\ud3ec\ub10c\ud2b8\ub294 JSX\ub85c \ub9cc\ub4e4\uace0, JSX\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc640 HTML\uc744 \uc870\ud569\ud55c \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud55c\ub2e4\ub294 \ub9d0\uc774 \uc774\uc81c\ub294 \uc870\uae08 \uc774\ud574\uac00 \ub420 \uac83\uc774\ub2e4.<\/li>\n<\/ul>\n<h4><strong>4.8. Orange.js \ud30c\uc77c\uc744 \uc0ad\uc81c\ud558\uace0 App.js \ud30c\uc77c \uc218\uc815\ud558\uae30<\/strong><\/h4>\n<ul>\n<li>Orange.js \ud30c\uc77c\uc744 \uc0ad\uc81c\ud558\uace0 App.js \ud30c\uc77c\uc5d0\uc11c Orange \ucef4\ud3ec\ub10c\ud2b8\ub97c import\ud558\ub294 \ucf54\ub4dc\ub97c \uc9c0\uc6b0\uc790.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\n\nfunction App() {\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t&lt;h1&gt;Hello&lt;\/h1&gt;\n\t\t\t&lt;Orange \/&gt;\n\t\t&lt;\/div&gt;);\n}\n\nexport default App;\n<\/code><\/pre>\n<ul>\n<li>\uc704 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud558\uba74 \uc624\ub958 \uba54\uc138\uc9c0\uac00 \ub098\uc628\ub2e4.<br \/>\n\uc624\ub958 \uba54\uc138\uc9c0\uc758 \ub0b4\uc6a9\uc740 &#39;App.js \ud30c\uc77c\uc5d0 Orange\uac00 \uc5c6\uc5b4\uc11c \ucef4\ud30c\uc77c\uc5d0 \uc2e4\ud328\ud588\ub2e4&#39;\ub77c\ub294 \ub0b4\uc6a9\uc774\ub2e4.<br \/>\n\uc774\uc81c \uc774 \uc624\ub958\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 App.js \ud30c\uc77c \uc548\uc5d0 Orange \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e0 \ub2e4\uc74c Orange \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud574 \ubcf4\uc790.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/3-1.png\" alt=\"\"><\/p>\n<h3><strong>4.9. App \ucef4\ud3ec\ub10c\ud2b8 \uc548\uc5d0 Orange \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/strong><\/h3>\n<ul>\n<li>src\/App.js\ub97c \uc5f4\uace0 \ub2e4\uc74c\uacfc \uac19\uc774 App \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc218\uc815\ud574\uc11c Orange \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4\u00a0\ubcf4\uc790.<br \/>\n\uc989, App.js \ud30c\uc77c\uc5d0 Orange() \ud568\uc218\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uc790.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\n\nconst Orange = () =&gt; {\n\treturn &lt;h3&gt;Orange&lt;\/h3&gt;;\n};\n\nfunction App() {\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t&lt;h1&gt;Hello&lt;\/h1&gt;\n\t\t\t&lt;Orange \/&gt;\n\t\t&lt;\/div&gt;);\n}\n\nexport default App;\n<\/code><\/pre>\n<ul>\n<li>\uc5d0\ub7ec\ub97c \uc77c\uc73c\ud0a4\uba70 \uc911\uc9c0\ub418\uc5c8\ub358 \uc571\uc774 \ub2e4\uc2dc \uc815\uc0c1\uc73c\ub85c \uc791\ub3d9\ud55c\ub2e4.<br \/>\nApp.js \ud30c\uc77c \uc548\uc5d0 Orange \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5c8\uace0, Orange \ucef4\ud3ec\ub10c\ud2b8\ub97c App \ucef4\ud3ec\ub10c\ud2b8 \uc548\uc5d0\uc11c \uc0ac\uc6a9\ud588\ub2e4.<\/li>\n<li><strong>\ucef4\ud3ec\ub10c\ud2b8\ub0b4\uc5d0 \uc911\ucca9\ud558\uc5ec \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc791\uc131\ud560\uc218 \uc788\ub2e4.<\/strong><\/li>\n<li><strong>\uc911\ucca9 \ucef4\ud3ec\ub10c\ud2b8\ub294 import \ubb38\uc774 \uc5c6\uc774\ub3c4 \ubd88\ub7ec\uc624\uae30\uac00 \uac00\ub2a5\ud558\ub2e4.<\/strong><\/li>\n<\/ul>\n<h2><strong>5. jsx \uc815\ub9ac<\/strong><\/h2>\n<blockquote>\n<p><strong>Info<\/strong>: \ud83d\udca1 <strong>jsx \ub780 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c UI\uc694\uc18c\ub97c \ubc18\ud658\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4dc\ub294 \ubb38\ubc95\uc774\ub2e4.<\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p>\ud83d\udea9 <strong>\ucef4\ud3ec\ub10c\ud2b8\uaddc\uce59<\/strong><\/p>\n<\/blockquote>\n<pre><code>1. \ud30c\uc77c\uba85\uc740 \ub300\ubb38\uc790\ub85c \uc2dc\uc791\n1. \ubc18\ub4dc\uc2dc\u00a0`return`\u00a0\uc73c\ub85c \ubc18\ud658\uac12\uc774 \uc788\uc5b4\uc57c \ud558\uba70\u00a0`return`\u00a0\ubb38\uc758 \ubc18\ud658\uac12\uc740 \ubc18\ub4dc\uc2dc UI\uc694\uc18c(\uc989 \uc720\uc0ac\ud0dc\uadf8) \uc774\uc5b4\uc57c \ud55c\ub2e4.\n1. \ucd5c\uc0c1\uc704 \uc694\uc18c\ub294 \ub2e8 \ud55c\uac1c\ub9cc \uac00\ub2a5\ud558\ub2e4.\n1. \uc911\ucca9\ucef4\ud3ec\ub10c\ud2b8\ub294 import \ub97c \uc0dd\ub7b5\ud574\ub3c4 \ub41c\ub2e4.\n<\/code><\/pre>\n<h2><strong>6. props<\/strong><\/h2>\n<blockquote>\n<p>**props\ub294 \ucef4\ud3ec\ub10c\ud2b8\uac04 \uc804\ub2ec\ud558\ub294 \ub370\uc774\ud130\ub97c \ub9d0\ud55c\ub2e4.<br \/>\n\ud568\uc218\uc758 \ub9e4\uac1c\ubcc0\uc218\ub77c\ub294 \uac1c\ub150\uc744 \uc54c\uace0 \uc788\ub2e4\uba74 \ub9e4\uac1c\ubcc0\uc218\ub97c \uc774\uc6a9\ud558\uba74 \ud568\uc218\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4\ub294 \uac83\uc744 \uc54c \uac83\uc774\ub2e4.<br \/>\n\ucef4\ud3ec\ub10c\ud2b8\uc758 props\ub3c4 \ube44\uc2b7\ud558\ub2e4. **<\/p>\n<\/blockquote>\n<p>  <strong>props\ub97c \uc0ac\uc6a9\ud558\uba74 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/strong><\/p>\n<h3><strong>6.1. \ucef4\ud3ec\ub10c\ud2b8 \uc5ec\ub7ec \uac1c \uc0ac\uc6a9\ud574 \ubcf4\uae30<\/strong><\/h3>\n<ul>\n<li>\ub9cc\uc57d \uc6b0\ub9ac\uac00 \ub9cc\ub4e0 \uc571\uc5d0 \uc74c\uc2dd \ubaa9\ub85d\uc774 \uc788\uace0, \uadf8 \uc74c\uc2dd\ubaa9\ub85d\uc744 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ud45c\ud604\ud55c\ub2e4\uace0 \ud574\ubcf4\uc790.<br \/>\n\uadf8\ub7f0 \uc0c1\ud669\uc744 \uac00\uc815\ud558\uae30 \uc704\ud574 Orange \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc774\ub984\uc744 Foods\ub85c \ubc14\uafd4 \ubcf4\uc790.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">\/* import Orange from &#39;.\/Orange&#39;; *\/\n\nconst Foods = () =&gt; {\n\treturn &lt;h3&gt;Foods&lt;\/h3&gt;;\n};\n\nfunction App() {\n\treturn (\n\t\t&lt;div className=&#39;App&#39;&gt;\n\t\t\t&lt;h1&gt;HELLO&lt;\/h1&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t&lt;\/div&gt;);\n}\n\nexport default App;\n<\/code><\/pre>\n<ul>\n<li>Foods\ucef4\ud3ec\ub10c\ud2b8 1\uac1c\uac00 \uc74c\uc2dd\ubaa9\ub85d 1\uac1c\ub77c\uace0 \uc0dd\uac01\ud558\uba74 \ub9cc\uc57d \uc74c\uc2dd\ubaa9\ub85d\uc744 15\uac1c \uadf8\ub9ac\ub824\uba74 \uc5b4\ub5bb\uac8c \ud574\uc57c \ud560\uae4c?<\/li>\n<\/ul>\n<h3><strong>6.2. \ub2e4\uc74c\uacfc \uac19\uc774 Foods\ucef4\ud3ec\ub10c\ud2b8\ub97c 15\uac1c \ubcf5\uc0ac\ud574\uc11c \ubd99\uc5ec \ub123\uc5b4 \ubcf4\uc790<\/strong><\/h3>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\n\nconst Foods = () =&gt; {\n\treturn &lt;h3&gt;Foods&lt;\/h3&gt;;\n};\n\nfunction App() {\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t&lt;h1&gt;Hello&lt;\/h1&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t\t&lt;Foods \/&gt;\n\t\t&lt;\/div&gt;);\n}\n\nexport default App;\n<\/code><\/pre>\n<ul>\n<li>\uc704\uc640 \uac19\uc774 \ucf54\ub4dc\ub97c \uad6c\uc131\ud55c\ub2e4\uba74 Foods\ucef4\ud3ec\ub10c\ud2b8\uac00 15\uac1c\ub098 \ub418\ub294\ub370 \ucd9c\ub825\ud558\ub294 \uac12\uc774 \ubaa8\ub450Foods\ub85c \uac19\ub2e4\ub294 \uac83\ub3c4 \ubb38\uc81c\uc774\ub2e4.\ucef4\ud3ec\ub10c\ud2b8\uac00 \uc11c\ub85c \ub2e4\ub978 \uac12\uc744 \ucd9c\ub825\ud574\uc57c \uc571\uc758 \ubaa9\ub85d\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc744 \ud150\ub370&#8230;\uadf8\ub798\uc11c\u00a0<strong>\ucef4\ud3ec\ub10c\ud2b8\ub85c \ub370\uc774\ud130\ub97c \ubcf4\ub0b4\ub294 \ubc29\ubc95\uc774 \ud544\uc694\ud558\ub2e4. \uadf8 \ubc29\ubc95\uc774 props<\/strong>\uc774\ub2e4.<\/li>\n<\/ul>\n<h3><strong>6.3. props\ub85c \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub370\uc774\ud130 \uc804\ub2ec\ud558\uae301<\/strong><\/h3>\n<ul>\n<li>.\/src\/App.js \ud30c\uc77c\uc758 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc774\ub984\uc744 Foods\uc5d0\uc11c Fruit\ub85c \ubcc0\uacbd\ud558\uc790. \uadf8\ub9ac\uace0 Foods \ucef4\ud3ec\ub10c\ud2b8\ub294 \ubaa8\ub450 \uc0ad\uc81c\ud558\uc790.<\/li>\n<li>h1 \uc758 \ucee8\ud150\uce20\ub3c4 hello \ub85c \ubcc0\uacbd\ud55c\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">\/* import Orange from &#39;.\/Orange&#39;; *\/\n\nconst Fruit = () =&gt; {\n\treturn &lt;h1&gt;I like orange&lt;\/h1&gt;;\n};\n\nfunction App() {\n\treturn (\n\t\t&lt;div className=&#39;App&#39;&gt;\n\t\t\t&lt;h1&gt;HELLO&lt;\/h1&gt;\n\t\t\t&lt;Fruit \/&gt;\n\t\t&lt;\/div&gt;);\n}\n\nexport default App;\n<\/code><\/pre>\n<ul>\n<li>\uc784\uc2dc\ub85c \uacfc\uc77c\uc744 \uc8fc\uc81c\ub85c \ub9ac\uc561\ud2b8 \uc571\uc744 \ub9cc\ub4e4\uc5b4 \ubcfc \uac83\uc774\ub2e4. \uadf8\ub0e5 \uacfc\uc77c \uc571\uc774\ub77c\uace0 \ubd80\ub974\uc790. props\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub370\uc774\ud130\ub97c \ubcf4\ub0bc \ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4\uace0 \ud588\ub2e4. \uc774\uc81c props\ub97c \uc774\uc6a9\ud558\uc5ec Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub370\uc774\ud130\ub97c \ubcf4\ub0b4 \ubcf4\uc790.<\/li>\n<\/ul>\n<h3><strong>6.4. props\ub85c \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub370\uc774\ud130 \uc804\ub2ec\ud558\uae302<\/strong><\/h3>\n<ul>\n<li>.\/src\/App.js \ud30c\uc77c\uc758\u00a0\ub97c\u00a0\ub85c \uc218\uc815\ud574 \ubcf4\uc790. fav props\uc758 \uac12\uc73c\ub85c &quot;banana&quot;\ub97c \ucd94\uac00\ud558\ub294 \uac83\uc774\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\n\nfunction Fruit() {\n\treturn &lt;h1&gt;I like orange&lt;\/h1&gt;;\n}\n\nfunction App() {\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t&lt;h1&gt;Hello&lt;\/h1&gt;\n\t\t\t&lt;Fruit fav=&#39;banana&#39; \/&gt;\n\t\t&lt;\/div&gt;);\n}\n\nexport default App;\n<\/code><\/pre>\n<ul>\n<li>\uc774\uac8c \ubc14\ub85c props\ub97c \uc774\uc6a9\ud558\uc5ec Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub370\uc774\ud130\ub97c \ubcf4\ub0b4\ub294 \ubc29\ubc95\uc774\ub2e4.Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc0ac\uc6a9\ud55c props\uc758 \uc774\ub984\uc740 fav\uc774\uace0, fav\uc5d0 &quot;banana&quot;\ub77c\ub294 \uac12\uc744 \ub2f4\uc544 Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ubcf4\ub0b8 \uac83\uc774\ub2e4.<\/li>\n<li>props\uc5d0\ub294 \ubd88\ub9ac\uc5b8 \uac12(true, false), \uc22b\uc790, \ubc30\uc5f4\uacfc \uac19\uc740 \ub2e4\uc591\ud55c \ud615\ud0dc\uc758 \ub370\uc774\ud130\ub97c \ub2f4\uc744 \uc218 \uc788\ub2e4.\uc5ec\uae30\uc11c \uc8fc\uc758\ud560 \uc810\uc740\u00a0<strong>props\uc5d0 \uc788\ub294 \ub370\uc774\ud130\ub294 \ubb38\uc790\uc5f4\uc778 \uacbd\uc6b0\ub97c \uc81c\uc678\ud558\uba74 \ubaa8\ub450 \uc911\uad04\ud638\u00a0<\/strong><strong><code>{}<\/code><\/strong><strong>\ub85c \uac12\uc744 \uac10\uc2f8\uc57c \ud55c\ub2e4\ub294 \uc810<\/strong>\uc774\ub2e4.<\/li>\n<\/ul>\n<h3><strong>6.5. Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 props \uc804\ub2ec\ud558\uae303<\/strong><\/h3>\n<ul>\n<li>.\/src\/App.js \ud30c\uc77c\uc758 Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 something, papapapa props\ub97c \ucd94\uac00\ud574 \ubcf4\uc790. \uadf8\ub9ac\uace0 \uc218\uc815\ud55c \ud30c\uc77c\uc744 \uc800\uc7a5.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\n\nfunction Fruit() {\n\treturn &lt;h1&gt;I like orange&lt;\/h1&gt;;\n}\n\nfunction App() {\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t&lt;h1&gt;Hello&lt;\/h1&gt;\n\t\t\t&lt;Fruit fav=&#39;banana&#39; something={true} papapapa={[&#39;hello&#39;, 1, 2, 3, 4, true]} \/&gt;\n\t\t&lt;\/div&gt;);\n}\n\nexport default App;\n<\/code><\/pre>\n<pre><code class=\"language-text\">jsx \ubb38\uc11c \ub0b4\uc5d0\uc11c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud45c\ud604\uc2dd\uc758 \ucd9c\ub825\uc740 `{}`\ub97c \uc0ac\uc6a9\ud55c\ub2e4.\nsomething \uc758 \uac12\uc740 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ub17c\ub9ac\uc790\ub8cc\ud615 true \uc774\ubbc0\ub85c `{}`\ub85c \ubb36\uc5b4\uc57c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud45c\ud604\uc2dd\uc73c\ub85c \ub80c\ub354\ub9c1\ud560\uc218 \uc788\ub2e4.\n<\/code><\/pre>\n<h3><strong>6.6. Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 props \uc804\ub2ec\ud558\uae304<\/strong><\/h3>\n<ul>\n<li>.\/src\/App.js \ud30c\uc77c\uc744 \uc218\uc815\ud55c \uc0c1\ud0dc\uc5d0\uc11c \ub9ac\uc561\ud2b8 \uc571\uc744 \uc2e4\ud589\ud574 \ubcf4\uc790.<\/li>\n<li>\uadf8\ub7ec\uba74 \uc544\ubb34\ub7f0 \ubcc0\ud654\uac00 \uc5c6\uc744 \uac83\uc774\ub2e4. \uc65c \uadf8\ub7f4\uae4c? Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 props\ub97c \ubcf4\ub0b4\uae30\ub9cc \ud588\uc744 \ubfd0 \uc544\uc9c1 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc558\uae30 \ub54c\ubb38\uc774\ub2e4.\uadf8\ub7fc Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c props\ub97c \uc0ac\uc6a9\ud558\ub824\uba74 \uc5b4\ub5bb\uac8c \ud574\uc57c \ud560\uae4c?<\/li>\n<\/ul>\n<h3><strong>6.7. Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 props \uc804\ub2ec\ud558\uae305<\/strong><\/h3>\n<ul>\n<li>.\/src\/App.js \ud30c\uc77c\uc5d0\uc11c \uc77c\ub2e8 Fruit \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc778\uc790\ub85c \uc804\ub2ec\ub41c props\ub97c \ucd9c\ub825\ud574 \ubcf4\uc790.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">const Fruit = (props) =&gt; {\n  console.log(props);\n  return &lt;h1&gt;I like orange&lt;\/h1&gt;;\n};\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/3-2.png\" alt=\"\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/3-3.png\" alt=\"\"><\/p>\n<ul>\n<li>\ub9ac\uc561\ud2b8\uc758 jsx\ub294 return \ud568\uc218\ub0b4\uc758 \ubc18\ud658\uac12\uc774 \ud0dc\uadf8\uc778\uac83\uc744 \uc758\ubbf8\ud55c\ub2e4.<\/li>\n<li>\uadf8\ub7ec\ubbc0\ub85c return \uc774\uc804\uc758 \ucf54\ub4dc\ub294 jsx \uac00 \uc544\ub2cc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc774\ubbc0\ub85c \ubc14\ub2d0\ub77c\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud560\uc218 \uc788\ub2e4.<\/li>\n<\/ul>\n<h3><strong>6.8. Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 props \uc804\ub2ec\ud558\uae306<\/strong><\/h3>\n<ul>\n<li>\ud06c\ub86c\uc758 \uac1c\ubc1c\uc790 \ub3c4\uad6c\ub97c \uc2e4\ud589\ud574\uc11c [Console] \ud0ed\uc744 \ub20c\ub7ec \ubcf4\uc790.<\/li>\n<li>Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc804\ub2ec\ud55c props(fav, something, papapapa)\ub97c \uc18d\uc131\uc73c\ub85c \uac00\uc9c0\ub294 \uac1d\uccb4(Object)\uac00 \ucd9c\ub825\ub418\uc5c8\ub2e4. fav, something, papapapa\uc758 \uac12\uc774 Fruit \ucef4\ud3ec\ub10c\ud2b8\uc758 \uccab \ubc88\uc9f8 \uc778\uc790(props)\ub85c \uc804\ub2ec\ub418\ub294 \uacfc\uc815\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/li>\n<\/ul>\n<h3><strong>6.9. Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 props \uc804\ub2ec\ud558\uae307 (props \ub2e4\uc2dc \ud55c\ubc88 \uc0ac\uc6a9\ud558\uae30)<\/strong><\/h3>\n<ul>\n<li>.\/src\/App.js \ud30c\uc77c\uc5d0\uc11c \ucf54\ub4dc\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud574\ubcf4\uc790. \uc77c\ub2e8 something, papapapa, props\ub294 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc744 \uac70\ub2c8\uae4c \uc9c0\uc6b0\uc790.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">...\nfunction App() {\n\treturn (\n\t\t&lt;div className=&#39;App&#39;&gt;\n\t\t\t&lt;h1&gt;HELLO&lt;\/h1&gt;\n\t\t\t&lt;Fruit fav=&#39;banana&#39; \/&gt;\n\t\t&lt;\/div&gt;);\n}\n...\n<\/code><\/pre>\n<ul>\n<li>\uadf8\ub7ec\uba74 \ucf58\uc194\uc5d0 {fav: &quot;banana&quot;}\ub9cc \ucd9c\ub825\ub420 \uac83\uc774\ub2e4. \ub9cc\uc57d \ubb38\uc790\uc5f4 &quot;banana&quot;\ub97c \ud654\uba74\uc5d0 \uadf8\ub300\ub85c \ucd9c\ub825\ud558\uace0 \uc2f6\ub2e4\uba74 \uc5b4\ub5bb\uac8c \ud574\uc57c \ud560\uae4c?<\/li>\n<\/ul>\n<h3><strong>6.10. Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 props \uc804\ub2ec\ud558\uae308<\/strong><\/h3>\n<ul>\n<li><code>\/src\/App.js<\/code>\u00a0\ud30c\uc77c\uc5d0\uc11c Fruit \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc788\ub294 \ub370\uc774\ud130 &quot;banana&quot;\ub97c \ud654\uba74\uc5d0 \ucd9c\ub825\ud558\uc790\uba74 props.fav\ub97c \uc911\uad04\ud638\ub85c \uac10\uc2f8\uba74 \ub41c\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">...\nconst Fruit = (props) =&gt; {\n\tconsole.log(props.fav);\n  return &lt;h3&gt;{props.fav}&lt;\/h3&gt;;\n};\n...\n<\/code><\/pre>\n<h3><strong>6.11. \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9\uc73c\ub85c props \uc0ac\uc6a9\ud558\uae30<\/strong><\/h3>\n<p>\ud83d\udd17<a href=\"https:\/\/www.notion.so\/03-destructuring-fb5e84cada484fe6832cb9c9b45b82d3\"><strong>03.destructuring<\/strong><\/a><\/p>\n<ul>\n<li>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 ES6 \ubb38\ubc95 \uc911 \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9(destrueturing-assignment)\ub97c \uc0ac\uc6a9\ud558\uba74 \uc810 \uc5f0\uc0b0\uc790\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc544\ub3c4 \ub41c\ub2e4. \ub2e4\uc74c\uc740\u00a0<strong>Fruit \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc804\ub2ec\ud55c fav props\ub97c Fruit \ucef4\ud3ec\ub10c\ud2b8(\ud568\uc218)\uc5d0\uc11c = props; \uc640 \uac19\uc740 \ubc29\ubc95\uc73c\ub85c \uc0ac\uc6a9<\/strong>\ud55c \uc608\uc774\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">\/* import Orange from &#39;.\/Orange&#39;; *\/\n\nconst Fruit = (props) =&gt; {\n\t\/\/const fav = props.fav;\n\tconst { fav } = props;\n\tconsole.log(fav);\n\treturn &lt;h3&gt;{fav}&lt;\/h3&gt;;\n};\n\nfunction App() {\n\treturn (\n\t\t&lt;div className=&#39;App&#39;&gt;\n\t\t\t&lt;h1&gt;HELLO&lt;\/h1&gt;\n\t\t\t&lt;Fruit fav=&#39;banana&#39; \/&gt;\n\t\t&lt;\/div&gt;);\n}\n\nexport default App;\n<\/code><\/pre>\n<ul>\n<li>props\uc5d0 \ud3ec\ud568\ub41c \ub370\uc774\ud130\uc758 \uac1c\uc218\uac00 \uc801\uc73c\uba74 \uc810 \uc5f0\uc0b0\uc790\ub97c \uc0ac\uc6a9\ud558\uc5ec props.fav\uc640 \uac19\uc740 \ubc29\ubc95\uc73c\ub85c \uc0ac\uc6a9\ud574\ub3c4 \ubd88\ud3b8\ud558\uc9c0 \uc54a\uc9c0\ub9cc, props\uc5d0 \ud3ec\ud568\ub41c \ub370\uc774\ud130\uc758 \uac1c\uc218\uac00 \ub9ce\uc544\uc9c0\uba74 \ub9e4\ubc88 props.fav\uc640 \uac19\uc740 \ubc29\ubc95\uc73c\ub85c \uc0ac\uc6a9\ud558\uba74 \ubd88\ud3b8\ud558\ub2e4. \uc774 \uacbd\uc6b0 \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9\uc744 \uc0ac\uc6a9\ud558\uba74 \ud3b8\ub9ac\ud558\ub2e4.<\/li>\n<li>\uad6c\uc870 \ubd84\ud574 \ud560\ub2f9\uc740 \uac1d\uccb4\uc5d0 \uc788\ub294 \ud0a4\uac12\uc744 \ud3b8\ud558\uac8c \ucd94\ucd9c\ud560 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubb38\ubc95\uc774\ub2e4.<\/li>\n<\/ul>\n<h4><strong>6.12. \uc5ec\ub7ec \uac1c\uc758 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 props \uc0ac\uc6a9\ud558\uae30<\/strong><\/h4>\n<ul>\n<li>Fruit \ucef4\ud3ec\ub10c\ud2b8\ub97c 3\uac1c \ucd94\uac00\ud558\uace0 fav props\uc758 \uac12\uc774 \uc11c\ub85c \ub2e4\ub974\ub3c4\ub85d \ucf54\ub4dc\ub97c \uc218\uc815\ud558\uc790.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\n\nfunction Fruit({ fav }) {\n\treturn &lt;h1&gt;I like{fav}&lt;\/h1&gt;;\n}\n\nfunction App() {\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t&lt;h1&gt;Hello&lt;\/h1&gt;\n\t\t\t&lt;Fruit fav=&#39;banana&#39; \/&gt;\n\t\t\t&lt;Fruit fav=&#39;orange&#39; \/&gt;\n\t\t\t&lt;Fruit fav=&#39;apple&#39; \/&gt;\n\t\t\t&lt;Fruit fav=&#39;melon&#39; \/&gt;\n\t\t&lt;\/div&gt;);\n}\n\nexport default App;\n<\/code><\/pre>\n<ul>\n<li>\uc774\ubc88 \uc561\uc158\uc5d0\uc11c\ub294 Fruit \ucef4\ud3ec\ub10c\ud2b8\ub97c 4\uac1c \uc0ac\uc6a9\ud574 \uac01 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc804\ub2ec\ud55c fav props\ub97c \ucd9c\ub825\ud588\ub2e4. \uac01\uac01\uc758 fav props\uc5d0\ub294 \uc11c\ub85c \ub2e4\ub978 \uac12\uc774 \ub4e4\uc5b4 \uc788\uc73c\ub2c8\uae4c \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud574\ub3c4 \uc11c\ub85c \ub2e4\ub978 \ubb38\uc7a5\uc774 \ucd9c\ub825\ub41c \uac83\uc774\ub2e4. \uc774\ub807\uac8c \ud558\ub294 \uac83\uc744 \ucef4\ud3ec\ub10c\ud2b8 \uc7ac \uc0ac\uc6a9\ub77c\uace0 \ud55c\ub2e4.<\/li>\n<li>\ubc30\uc6b4 \ub0b4\uc6a9\uc744 \uc815\ub9ac\ud574 \ubcf4\uc790.<\/li>\n<\/ul>\n<ol>\n<li>\ucef4\ud3ec\ub10c\ud2b8\uac00 \ubb34\uc5c8\uc778\uc9c0 \uc54c\uc544\ubcf4\uace0 JSX\ub97c \uacf5\ubd80\ud588\ub2e4.<\/li>\n<li>JSX\ub294 \ub2e8\uc9c0 HTML\uacfc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc870\ud569\ud55c \ubb38\ubc95\uc774\ub2e4.<\/li>\n<li>JSX\ub97c \uc774\uc6a9\ud574\uc11c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc791\uc131\ud588\ub2e4. (\ucef4\ud3ec\ub10c\ud2b8\uc758 \uc774\ub984\uc740 \ub300\ubb38\uc790\ub85c \uc2dc\uc791\ud568\uc5d0 \uc720\uc758!)<\/li>\n<li>\ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud560 \ub54c\ub294 props \uc0ac\uc6a9\ud558\uba74 \ub41c\ub2e4.<\/li>\n<li>\ucef4\ud3ec\ub10c\ud2b8\uc5d0 props\ub97c \uc804\ub2ec\ud558\uba74 props\uc5d0 \uc788\ub294 \ub370\uc774\ud130\uac00 \ud558\ub098\uc758 \uac1d\uccb4\ub85c \ubcc0\ud658\ub418\uc5b4 \ucef4\ud3ec\ub10c\ud2b8(\ud568\uc218)\uc758 \uc778\uc790\ub85c \uc804\ub2ec\ub418\uace0, \uc774\uac78 \ubc1b\uc544\uc11c \ucef4\ud3ec\ub10c\ud2b8(\ud568\uc218)\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc5c8\ub2e4.<br \/>\nES6\uc758 \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9\uc744 \uc0ac\uc6a9\ud558\uba74 props\ub97c \uc880 \ub354 \ud3b8\ub9ac\ud55c \ubc29\ubc95\uc73c\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc5c8\uace0, \uc571\uc744 \ub9cc\ub4e4 \ub54c \uc774 \ud328\ud134\uc774 \uc0ac\uc6a9\ub418\ub2c8\uae4c \uc798 \uae30\uc5b5\ud558\uace0 \ub118\uc5b4\uac00\uc790.<\/li>\n<\/ol>\n<h2><strong>7. \uc5ec\uae30\uae4c\uc9c0 \uae43\ud5c8\ube0c\uc5d0 \uc62c\ub9ac\uae30<\/strong><\/h2>\n<pre><code class=\"language-bash\">$ git add .\n$ git commit -m &quot;03 \uae43\ud5c8\ube0c\uc5d0 \ub9ac\uc561\ud2b8 \uc571 \uc5c5\ub85c\ub4dc\ud558\uae30&quot;\n$ git push origin main\n<\/code><\/pre>\n<h2><strong>8. \uc644\uc131\ucf54\ub4dc<\/strong><\/h2>\n<p>\ud83d\udd17<a href=\"https:\/\/github.com\/qwerewqwerew\/recipeApp\/tree\/chap3\"><strong>\uc644\uc131\uc18c\uc2a4\ucf54\ub4dc<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd17\uc720\ud29c\ube0c \uac15\uc758 \uc644\uc131\ucf54\ub4dc 1. \uc601\uc0c1\ubcf4\uae30 1-2. \ucef4\ud3ec\ub10c\ud2b8\uc640 \ud504\ub86d\uc2a4\ub780? component: \ub450\ubc88\uc774\uc0c1 \uc0ac\uc6a9\ub418\ub294 UI \uc694\uc18c\ub97c \uc0ac\uc6a9\uc790\uc815\uc758 \ud0dc\uadf8\ub85c \ub9cc\ub4e4\uc5b4 \uc0ac\uc6a9\ud558\ub294 \uac83 props: \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc804\ub2ec\ud558\ub294 \ub370\uc774\ud130 2. App.js \ud30c\uc77c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc815\uc758 \uc54c\uc544\ubcf4\uae30 .\/src\/App.js \ud30c\uc77c\uc744 \uc5f4\uace0 App() \ud568\uc218\uc640 App() \ud568\uc218\uac00 \ubc18\ud658\ud558\ub294 \uac12\uc744 \ubcf4\uc790. import React from &#39;react&#39;; function App() { \/\/App() \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud588\uace0, return ( \/\/ App \ucef4\ud3ec\ub10c\ud2b8\ub294 HTML\uc744 \ubc18\ud658\ud558\uace0 &#8230; <a title=\"\ucef4\ud3ec\ub10c\ud2b8\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=164\" aria-label=\"\ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-164","post","type-post","status-publish","format-standard","hentry","category-react-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=164"}],"version-history":[{"count":1,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/164\/revisions"}],"predecessor-version":[{"id":2241,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/164\/revisions\/2241"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}