{"id":919,"date":"2025-06-15T13:42:27","date_gmt":"2025-06-15T04:42:27","guid":{"rendered":"https:\/\/nangchang.nes.or.kr\/?p=919"},"modified":"2025-06-24T00:16:09","modified_gmt":"2025-06-23T15:16:09","slug":"%f0%9f%9a%80-%eb%a6%ac%ec%95%a1%ed%8a%b8-%ec%95%b1-%ec%8b%9c%ec%9e%91%ed%95%98%ea%b8%b0-%ec%b2%ab-%eb%b2%88%ec%a7%b8-%ec%bb%b4%ed%8f%ac%eb%84%8c%ed%8a%b8-%eb%a7%8c%eb%93%a4%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/nangchang.nes.or.kr\/?p=919","title":{"rendered":"[React] \ud83d\ude80 \ub9ac\uc561\ud2b8 \uc571 \uc2dc\uc791\ud558\uae30 \u2013 \uccab \ubc88\uc9f8 \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30"},"content":{"rendered":"\n<p>\ub9ac\uc561\ud2b8\ub97c \uc774\ud574\ud558\ub824\uba74 <strong>&#8220;\ucef4\ud3ec\ub10c\ud2b8&#8221;<\/strong>\ub97c \uc9c1\uc811 \ub9cc\ub4e4\uc5b4\ubcf4\ub294 \uac8c \uac00\uc7a5 \ube60\ub978 \uae38\uc785\ub2c8\ub2e4.<br>\uc774\ubc88 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8 \uc571\uc744 \ub9cc\ub4dc\ub294 \uccab \ub2e8\uacc4\ubd80\ud130, <strong>\uae30\ubcf8 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uace0 \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95<\/strong>\uae4c\uc9c0 \uc544\uc8fc \uc27d\uac8c \uc54c\ub824\ub4dc\ub9b4\uac8c\uc694.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">1. \ud83e\uddf0 \ub9ac\uc561\ud2b8 \uc571 \ub9cc\ub4dc\ub294 \ubc95<\/h3>\n\n\n\n<p>\ub9ac\uc561\ud2b8\ub97c \ucc98\uc74c\ubd80\ud130 \uc124\uce58\ud558\ub294 \uac00\uc7a5 \uc26c\uc6b4 \ubc29\ubc95\uc740 <strong>Vite<\/strong> \ub610\ub294 <strong>Create React App<\/strong>\uc744 \uc4f0\ub294 \uac83\uc785\ub2c8\ub2e4.<br>\uc694\uc998\uc740 <strong>Vite<\/strong>\uac00 \ube60\ub974\uace0 \uac00\ubcbc\uc6cc\uc11c \ub9ce\uc774 \uc0ac\uc6a9\ub418\uace0 \uc788\uc5b4\uc694.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\"># \uc124\uce58 (Node.js\uac00 \ud544\uc694\ud574\uc694)\nnpm create vite@latest my-react-app --template react\ncd my-react-app\nnpm install\nnpm run dev\n<\/code><\/pre>\n\n\n\n<p>\ud83d\udc49 <code>http:\/\/localhost:5173<\/code> \uc5d0 \uc811\uc18d\ud558\uba74 \ub9ac\uc561\ud2b8 \uc571\uc774 \uc2e4\ud589\ub429\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\">2. \ud83d\udcc1 \ud3f4\ub354 \uad6c\uc870 \uac04\ub2e8\ud788 \ubcf4\uae30<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">my-react-app\/\n\u251c\u2500 src\/\n\u2502  \u251c\u2500 App.jsx      \u2190 \uc6b0\ub9ac\uac00 \ud3b8\uc9d1\ud560 \uba54\uc778 \ucef4\ud3ec\ub10c\ud2b8\n\u2502  \u2514\u2500 main.jsx     \u2190 \uc571 \uc2dc\uc791 \uc9c0\uc810 (entry point)\n\u251c\u2500 index.html\n\u2514\u2500 package.json\n<\/code><\/pre>\n\n\n\n<p>\uc6b0\ub9ac\ub294 <code>App.jsx<\/code> \ud30c\uc77c\uc5d0\uc11c \ud654\uba74\uc5d0 \ub098\ud0c0\ub0a0 \ub0b4\uc6a9\uc744 \uc791\uc131\ud560 \uac70\uc608\uc694.<\/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\udde9 \uccab \ubc88\uc9f8 \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/h3>\n\n\n\n<p>\ucef4\ud3ec\ub10c\ud2b8\ub294 \uadf8\ub0e5 <strong>\ud568\uc218 \ud558\ub098<\/strong>\ub77c\uace0 \uc0dd\uac01\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">function Hello() {\n  return &lt;h1&gt;\uc548\ub155\ud558\uc138\uc694, React!&lt;\/h1&gt;;\n}\n<\/code><\/pre>\n\n\n\n<p>\uc774\uc81c \uc774 \ucef4\ud3ec\ub10c\ud2b8\ub97c <code>App.jsx<\/code> \uc548\uc5d0\uc11c \uc0ac\uc6a9\ud574\ubcfc \uc218 \uc788\uc5b4\uc694.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">function App() {\n  return (\n    &lt;div&gt;\n      &lt;Hello \/&gt;;\n    &lt;\/div&gt;;\n  );\n}\n<\/code><\/pre>\n\n\n\n<p><code>&lt;Hello \/&gt;<\/code>\ub294 \uc6b0\ub9ac\uac00 \ub9cc\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\ub97c HTML \ud0dc\uadf8\ucc98\ub7fc \uc0ac\uc6a9\ud558\ub294 \uac83\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\">\ud83d\uddbc\ufe0f \ucef4\ud3ec\ub10c\ud2b8 \uad6c\uc870 \ub2e4\uc774\uc5b4\uadf8\ub7a8<\/h3>\n\n\n\n<p>\uc544\ub798 \uadf8\ub9bc\uc740 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc2e4\uc81c\ub85c \uc5b4\ub5bb\uac8c \uc791\ub3d9\ud558\ub294\uc9c0\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-1024x683.png\" alt=\"\" class=\"wp-image-920\" srcset=\"https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-1024x683.png 1024w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-300x200.png 300w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-768x512.png 768w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-624x416.png 624w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>App \ucef4\ud3ec\ub10c\ud2b8\uac00 Hello \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubd88\ub7ec\uc624\uace0, \ucd5c\uc885\uc801\uc73c\ub85c \ube0c\ub77c\uc6b0\uc800\uc5d0\ub294 &#8220;\uc548\ub155\ud558\uc138\uc694, React!&#8221;\uac00 \ub098\ud0c0\ub0a9\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\">4. \ud83d\udde3\ufe0f \uaf2d \uc54c\uc544\ub458 \ubb38\ubc95 2\uac00\uc9c0<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\ucef4\ud3ec\ub10c\ud2b8 \uc774\ub984\uc740 \ubc18\ub4dc\uc2dc \ub300\ubb38\uc790\ub85c \uc2dc\uc791!<\/strong><br><code>hello()<\/code> \u274c \u2192 <code>Hello()<\/code> \u2705<\/li>\n\n\n\n<li><strong>return \uc548\uc5d0\ub294 JSX \uc0ac\uc6a9<\/strong><br>JSX\ub294 JavaScript \uc548\uc5d0 HTML\ucc98\ub7fc \ucf54\ub4dc\ub97c \uc4f8 \uc218 \uc788\ub294 \ubb38\ubc95\uc785\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\udd01 \uc2e4\uc2b5 \ud301: \ub098\ub9cc\uc758 \uc778\uc0ac\ub9d0 \ub9cc\ub4e4\uae30<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">function Greeting(props) {\n  return &lt;h2&gt;\uc548\ub155\ud558\uc138\uc694, {props.name}\ub2d8&lt;\/h&gt;;\n}\n<\/code><\/pre>\n\n\n\n<p>\uadf8\ub9ac\uace0 \uc774\ub807\uac8c \uc368\ubcf4\uc138\uc694:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;Greeting name=\"\uc9c0\ubbfc\" \/&gt;;\n&lt;Greeting name=\"\ubbfc\uc218\" \/&gt;;\n<\/code><\/pre>\n\n\n\n<p>\ud83d\udca1 \ub9ac\uc561\ud2b8\ub294 <code>props<\/code>(\uc18d\uc131)\uc744 \ud1b5\ud574 \ub2e4\ub978 \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud560 \uc218 \uc788\uc5b4\uc694.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u2705 \uc815\ub9ac<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub9ac\uc561\ud2b8 \uc571\uc740 Vite\ub85c \uac04\ub2e8\ud788 \ub9cc\ub4e4 \uc218 \uc788\ub2e4<\/li>\n\n\n\n<li>\ucef4\ud3ec\ub10c\ud2b8\ub294 \ud568\uc218\ub2e4! \u2192 <code>&lt;\ucef4\ud3ec\ub10c\ud2b8\uc774\ub984 \/&gt;<\/code> \uc73c\ub85c \uc0ac\uc6a9<\/li>\n\n\n\n<li>JSX \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud574\uc11c HTML\ucc98\ub7fc UI\ub97c \uc791\uc131\ud55c\ub2e4<\/li>\n\n\n\n<li>props\ub97c \ud1b5\ud574 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uac12\uc744 \uc804\ub2ec\ud560 \uc218 \uc788\ub2e4<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" id=\"block-efe38406-e07c-49d2-9f11-886b01e1ed01\"\/>\n","protected":false},"excerpt":{"rendered":"<p>\ub9ac\uc561\ud2b8\ub97c \uc774\ud574\ud558\ub824\uba74 &#8220;\ucef4\ud3ec\ub10c\ud2b8&#8221;\ub97c \uc9c1\uc811 \ub9cc\ub4e4\uc5b4\ubcf4\ub294 \uac8c \uac00\uc7a5 \ube60\ub978 \uae38\uc785\ub2c8\ub2e4.\uc774\ubc88 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8 \uc571\uc744 \ub9cc\ub4dc\ub294 \uccab \ub2e8\uacc4\ubd80\ud130, \uae30\ubcf8 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uace0 \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uae4c\uc9c0 \uc544\uc8fc \uc27d\uac8c \uc54c\ub824\ub4dc\ub9b4\uac8c\uc694. 1. \ud83e\uddf0 \ub9ac\uc561\ud2b8 \uc571 \ub9cc\ub4dc\ub294 \ubc95 \ub9ac\uc561\ud2b8\ub97c \ucc98\uc74c\ubd80\ud130 \uc124\uce58\ud558\ub294 \uac00\uc7a5 \uc26c\uc6b4 \ubc29\ubc95\uc740 Vite \ub610\ub294 Create React App\uc744 \uc4f0\ub294 \uac83\uc785\ub2c8\ub2e4.\uc694\uc998\uc740 Vite\uac00 \ube60\ub974\uace0 \uac00\ubcbc\uc6cc\uc11c \ub9ce\uc774 \uc0ac\uc6a9\ub418\uace0 \uc788\uc5b4\uc694. \ud83d\udc49 http:\/\/localhost:5173 \uc5d0 \uc811\uc18d\ud558\uba74 \ub9ac\uc561\ud2b8 \uc571\uc774 \uc2e4\ud589\ub429\ub2c8\ub2e4! [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[80],"class_list":["post-919","post","type-post","status-publish","format-standard","hentry","category-pogramming","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/919","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=919"}],"version-history":[{"count":4,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/919\/revisions"}],"predecessor-version":[{"id":953,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/919\/revisions\/953"}],"wp:attachment":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}