{"id":72,"date":"2026-06-26T13:32:24","date_gmt":"2026-06-26T13:32:24","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=72"},"modified":"2026-06-26T13:32:24","modified_gmt":"2026-06-26T13:32:24","slug":"react-%ea%b0%9c%eb%b0%9c-%ed%99%98%ea%b2%bd-%ec%9d%b4%ed%95%b4","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=72","title":{"rendered":"React \uac1c\ubc1c \ud658\uacbd \uc774\ud574"},"content":{"rendered":"<h1>1\uac15. React \uac1c\ubc1c \ud658\uacbd \uc774\ud574<\/h1>\n<p>React 19\uc640 Vite\ub97c \uae30\ubc18\uc73c\ub85c \uac1c\ubc1c \ud658\uacbd\uc744 \uad6c\ucd95\ud558\uace0 \uae30\ubcf8 \uac1c\ub150\uc744 \uc774\ud574\ud55c\ub2e4.<\/p>\n<h2>1. \uc6f9 \uac1c\ubc1c\uc758 \ubcc0\ud654\uc640 React<\/h2>\n<h3>SPA (Single Page Application)\uc758 \ub4f1\uc7a5<\/h3>\n<p>\uacfc\uac70\uc758 \uc6f9\uc740 \ud398\uc774\uc9c0\ub97c \uc774\ub3d9\ud560 \ub54c\ub9c8\ub2e4 \uc11c\ubc84\ub85c\ubd80\ud130 \uc0c8\ub85c\uc6b4 HTML\uc744 \ubc1b\uc544\uc624\ub294 MPA(Multi Page Application) \ubc29\uc2dd\uc774\uc5c8\ub2e4. \uc774\ub294 \ud654\uba74 \uae5c\ube61\uc784\uc774 \ubc1c\uc0dd\ud558\uace0 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc774 \uc800\ud558\ub418\ub294 \ub2e8\uc810\uc774 \uc788\ub2e4.<\/p>\n<p>React\ub294 SPA \ubc29\uc2dd\uc744 \ucc44\ud0dd\ud55c\ub2e4. \ud558\ub098\uc758 HTML \ud398\uc774\uc9c0(index.html)\ub9cc \ub85c\ub4dc\ud558\uace0, \ub0b4\ubd80\uc758 \ub0b4\uc6a9\uc740 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \ub3d9\uc801\uc73c\ub85c \ubc14\uafd4\uce58\uae30\ud55c\ub2e4. \uc774\ub85c \uc778\ud574 \uc571(App)\ucc98\ub7fc \ubd80\ub4dc\ub7ec\uc6b4 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud55c\ub2e4.<\/p>\n<h3>React\ub97c \uc0ac\uc6a9\ud558\ub294 \uc774\uc720<\/h3>\n<ul>\n<li><strong>\ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18:<\/strong> UI\ub97c \ub808\uace0 \ube14\ub85d\ucc98\ub7fc \ucabc\uac1c\uc11c \uac1c\ubc1c\ud558\ubbc0\ub85c \uc7ac\uc0ac\uc6a9\uc131\uacfc \uc720\uc9c0\ubcf4\uc218\uac00 \ub6f0\uc5b4\ub098\ub2e4.<\/li>\n<li><strong>\uac00\uc0c1 DOM (Virtual DOM):<\/strong> \uc2e4\uc81c DOM\uc744 \uc9c1\uc811 \uc870\uc791\ud558\ub294 \uac83\uc740 \ub290\ub9ac\ub2e4. React\ub294 \uba54\ubaa8\ub9ac\uc5d0 \uac00\uc0c1 DOM\uc744 \ub450\uace0 \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \uacc4\uc0b0\ud558\uc5ec \uc2e4\uc81c \ud654\uba74\uc5d0 \ud6a8\uc728\uc801\uc73c\ub85c \ubc18\uc601\ud55c\ub2e4.<\/li>\n<li><strong>\uc0dd\ud0dc\uacc4:<\/strong> \uac00\uc7a5 \ubc29\ub300\ud55c \ucee4\ubba4\ub2c8\ud2f0\uc640 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ubcf4\uc720\ud558\uace0 \uc788\ub2e4.<\/li>\n<\/ul>\n<h2>2. \ud544\uc218 \uac1c\ubc1c \ub3c4\uad6c \uc124\uce58<\/h2>\n<p>React \uac1c\ubc1c\uc744 \uc2dc\uc791\ud558\uae30 \uc704\ud574 \ud544\uc694\ud55c \ub3c4\uad6c\ub4e4\uc744 \uc124\uce58\ud55c\ub2e4.<\/p>\n<h3>Node.js\uc640 NPM<\/h3>\n<p>\ube0c\ub77c\uc6b0\uc800 \ubc16\uc5d0\uc11c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc2e4\ud589\ud558\uae30 \uc704\ud574 Node.js\uac00 \ud544\uc694\ud558\ub2e4. React \uc790\uccb4\ub294 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ub3cc\uc9c0\ub9cc, \uac1c\ubc1c \ub3c4\uad6c(Vite \ub4f1)\uac00 Node.js \uc704\uc5d0\uc11c \ub3cc\uc544\uac04\ub2e4.<\/p>\n<ul>\n<li><strong>Node.js:<\/strong> \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub7f0\ud0c0\uc784 \ud658\uacbd. LTS(\uc7a5\uae30 \uc9c0\uc6d0) \ubc84\uc804 \uc124\uce58\ub97c \uad8c\uc7a5\ud55c\ub2e4.<\/li>\n<li><strong>NPM (Node Package Manager):<\/strong> Node.js \uc124\uce58 \uc2dc \uc790\ub3d9 \uc124\uce58\ub41c\ub2e4. \ub0a8\ub4e4\uc774 \ub9cc\ub4e0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub3c4\uad6c(\ub77c\uc774\ube0c\ub7ec\ub9ac)\ub97c \uc27d\uac8c \ub2e4\uc6b4\ub85c\ub4dc\ud558\uace0 \uad00\ub9ac\ud574\uc900\ub2e4.<\/li>\n<\/ul>\n<blockquote>\n<p><strong>Tip<\/strong>: <strong>[\uc2e4\uc2b5] Node.js \uc124\uce58 \ud655\uc778<\/strong><\/p>\n<p>\ud130\ubbf8\ub110(CMD \ub610\ub294 PowerShell)\uc744 \uc5f4\uace0 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-bash\">\n<\/code><\/pre>\n<\/blockquote>\n<p>node -v<br \/>\nnpm -v<\/p>\n<pre><code>&gt; \n&gt; \ubc84\uc804 \uc22b\uc790\uac00 \ucd9c\ub825\ub418\uba74 \uc815\uc0c1\uc801\uc73c\ub85c \uc124\uce58\ub41c \uac83\uc774\ub2e4.\n\n### VS Code (Visual Studio Code)\n\n\ub9c8\uc774\ud06c\ub85c\uc18c\ud504\ud2b8\uc5d0\uc11c \ub9cc\ub4e0 \ubb34\ub8cc \ucf54\ub4dc \uc5d0\ub514\ud130\ub2e4. React \uac1c\ubc1c\uc5d0 \ud544\uc218\uc801\uc778 \ud655\uc7a5 \ud504\ub85c\uadf8\ub7a8\ub4e4\uc774 \ub9ce\ub2e4.\n\n- **ES7+ React\/Redux\/React-Native snippets:** React \ucf54\ub4dc \uc790\ub3d9 \uc644\uc131 \uae30\ub2a5\uc744 \uc81c\uacf5\ud55c\ub2e4.\n- **Prettier:** \ucf54\ub4dc\ub97c \uae54\ub054\ud558\uac8c \uc790\ub3d9 \uc815\ub82c\ud574\uc900\ub2e4.\n\n## 3. Vite\ub85c \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131\ud558\uae30\n\n\uacfc\uac70\uc5d0\ub294 CRA(Create React App)\ub97c \ub9ce\uc774 \uc37c\uc9c0\ub9cc, \ucd5c\uadfc\uc5d0\ub294 \uc18d\ub3c4\uac00 \ud6e8\uc52c \ube60\ub978 **Vite(\ube44\ud2b8)**\ub97c \ud45c\uc900\ucc98\ub7fc \uc0ac\uc6a9\ud55c\ub2e4.\n\n### \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 \uba85\ub839\uc5b4\n\n\ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e4\uace0 \uc2f6\uc740 \ud3f4\ub354\uc5d0\uc11c \ud130\ubbf8\ub110\uc744 \uc5f4\uace0 \uc544\ub798 \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud55c\ub2e4.\n\n```bash\nnpm create vite@latest .\n<\/code><\/pre>\n<p>\ud504\ub808\uc784\uc6cc\ud06c \uc120\ud0dd \uc2dc <code>React<\/code>\ub97c, \uc5b8\uc5b4 \uc120\ud0dd \uc2dc <code>JavaScript<\/code>(\ub610\ub294 SWC)\ub97c \uc120\ud0dd\ud55c\ub2e4.<\/p>\n<h3>\uc758\uc874\uc131 \uc124\uce58 \ubc0f \uc2e4\ud589<\/h3>\n<p>\ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\ub85c \uc774\ub3d9\ud558\uc5ec \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub4e4\uc744 \uc124\uce58\ud558\uace0 \uc2e4\ud589\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-bash\">cd my-react-app\nnpm install\nnpm run dev\n<\/code><\/pre>\n<blockquote>\n<p><strong>Note<\/strong>: <strong>npm install\uc774\ub780?<\/strong><\/p>\n<p><code>package.json<\/code> \ud30c\uc77c\uc5d0 \uc801\ud78c \ub77c\uc774\ube0c\ub7ec\ub9ac \ubaa9\ub85d\uc744 \ubcf4\uace0 <code>node_modules<\/code> \ud3f4\ub354\uc5d0 \uc2e4\uc81c \ud30c\uc77c\ub4e4\uc744 \ub2e4\uc6b4\ub85c\ub4dc\ud558\ub294 \uacfc\uc815\uc774\ub2e4.<\/p>\n<\/blockquote>\n<p>\ud130\ubbf8\ub110\uc5d0 <code>http:\/\/localhost:5173<\/code> \uac19\uc740 \uc8fc\uc18c\uac00 \ub728\uba74 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc811\uc18d\ud574\ubcf8\ub2e4. Vite \ub85c\uace0\uc640 React \ub85c\uace0\uac00 \ub3cc\uc544\uac00\ub294 \ud654\uba74\uc774 \ubcf4\uc774\uba74 \uc131\uacf5\uc774\ub2e4.<\/p>\n<h2>4. React vs VanillaJS \ube44\uad50<\/h2>\n<p>\uac19\uc740 \uae30\ub2a5\uc744 \uad6c\ud604\ud560 \ub54c \uc21c\uc218 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8(VanillaJS)\uc640 React\uac00 \uc5b4\ub5bb\uac8c \ub2e4\ub978\uc9c0 \ube44\uad50\ud55c\ub2e4. \uc608\uc81c\ub294 &#39;\uc22b\uc790 \uc99d\uac00 \uce74\uc6b4\ud130&#39;\ub2e4.<\/p>\n<h3>VanillaJS \ubc29\uc2dd (\uba85\ub839\ud615)<\/h3>\n<p>DOM \uc694\uc18c\ub97c \uc9c1\uc811 \ucc3e\uace0, \uc774\ubca4\ud2b8\ub97c \uac78\uace0, \ub0b4\uc6a9\uc744 \uc9c1\uc811 \ubc14\uafd4\uc57c \ud55c\ub2e4.<\/p>\n<pre><code class=\"language-html\">\n&lt;h1 id=&quot;count&quot;&gt;0&lt;\/h1&gt;\n&lt;button id=&quot;btn&quot;&gt;\uc99d\uac00&lt;\/button&gt;\n\n&lt;script&gt;\n  let count = 0;\n  const h1 = document.getElementById(&#39;count&#39;);\n  const btn = document.getElementById(&#39;btn&#39;);\n\n  btn.addEventListener(&#39;click&#39;, () =&gt; {\n    count++;\n    h1.innerText = count; \/\/ \ud654\uba74\uc744 \uc5b4\ub5bb\uac8c \ubc14\uafc0\uc9c0 \uc77c\uc77c\uc774 \uc9c0\uc815\n  });\n&lt;\/script&gt;\n<\/code><\/pre>\n<h3>React \ubc29\uc2dd (\uc120\uc5b8\ud615)<\/h3>\n<p>\ub370\uc774\ud130(\uc0c1\ud0dc)\ub9cc \ubc14\uafb8\uba74 UI\ub294 \uc54c\uc544\uc11c \uc5c5\ub370\uc774\ud2b8\ub41c\ub2e4. &quot;\uc5b4\ub5bb\uac8c(How)&quot;\uac00 \uc544\ub2c8\ub77c &quot;\ubb34\uc5c7\uc744(What)&quot; \ubcf4\uc5ec\uc904\uc9c0\uc5d0 \uc9d1\uc911\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">function App() {\n  const [count, setCount] = useState(0); \/\/ \uc0c1\ud0dc \uc815\uc758\n\n  return (\n    &lt;&gt;\n      &lt;h1&gt;{count}&lt;\/h1&gt; {\/* \ub370\uc774\ud130\uac00 \ubc14\ub00c\uba74 \uc54c\uc544\uc11c \uac31\uc2e0\ub428 *\/}\n      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;\uc99d\uac00&lt;\/button&gt;\n    &lt;\/&gt;\n  );\n}\n<\/code><\/pre>\n<h2>5. \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870 \ud6d1\uc5b4\ubcf4\uae30<\/h2>\n<p>\uc0dd\uc131\ub41c \ud504\ub85c\uc81d\ud2b8\uc758 \uc8fc\uc694 \ud30c\uc77c\ub4e4\uc744 \uc0b4\ud3b4\ubcf8\ub2e4.<\/p>\n<ul>\n<li><code>node_modules\/<\/code>: \uc124\uce58\ub41c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub4e4\uc774 \ubaa8\uc5ec\uc788\ub294 \uac70\ub300\ud55c \ud3f4\ub354. (\uc808\ub300 \uac74\ub4dc\ub9ac\uc9c0 \uc54a\ub294\ub2e4)<\/li>\n<li><code>public\/<\/code>: \uc774\ubbf8\uc9c0, \ud3f0\ud2b8 \ub4f1 \uc815\uc801 \ud30c\uc77c \ubcf4\uad00\uc18c.<\/li>\n<li><code>src\/<\/code>: \uc2e4\uc81c \uc18c\uc2a4 \ucf54\ub4dc\ub97c \uc791\uc131\ud558\ub294 \uacf3.\n<ul>\n<li><code>main.jsx<\/code>: React \uc571\uc758 \uc9c4\uc785\uc810.<\/li>\n<li><code>App.jsx<\/code>: \uc6b0\ub9ac\uac00 \uc218\uc815\ud560 \uba54\uc778 \ud654\uba74 \ucef4\ud3ec\ub10c\ud2b8.<\/li>\n<li><code>App.css<\/code>: \ucef4\ud3ec\ub10c\ud2b8 \uc2a4\ud0c0\uc77c \ud30c\uc77c.<\/li>\n<\/ul>\n<\/li>\n<li><code>index.html<\/code>: \uc6f9\ud398\uc774\uc9c0\uc758 \uaecd\ub370\uae30. React\uac00 \uc774 \uc548\uc758 <code>div id=&quot;root&quot;<\/code>\uc5d0 \ub0b4\uc6a9\uc744 \ucc44\uc6cc \ub123\ub294\ub2e4.<\/li>\n<li><code>package.json<\/code>: \ud504\ub85c\uc81d\ud2b8 \uc815\ubcf4\uc640 \uc124\uce58\ub41c \ub77c\uc774\ube0c\ub7ec\ub9ac \ubaa9\ub85d\uc744 \uad00\ub9ac\ud558\ub294 \uba85\uc138\uc11c.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>1\uac15. React \uac1c\ubc1c \ud658\uacbd \uc774\ud574 React 19\uc640 Vite\ub97c \uae30\ubc18\uc73c\ub85c \uac1c\ubc1c \ud658\uacbd\uc744 \uad6c\ucd95\ud558\uace0 \uae30\ubcf8 \uac1c\ub150\uc744 \uc774\ud574\ud55c\ub2e4. 1. \uc6f9 \uac1c\ubc1c\uc758 \ubcc0\ud654\uc640 React SPA (Single Page Application)\uc758 \ub4f1\uc7a5 \uacfc\uac70\uc758 \uc6f9\uc740 \ud398\uc774\uc9c0\ub97c \uc774\ub3d9\ud560 \ub54c\ub9c8\ub2e4 \uc11c\ubc84\ub85c\ubd80\ud130 \uc0c8\ub85c\uc6b4 HTML\uc744 \ubc1b\uc544\uc624\ub294 MPA(Multi Page Application) \ubc29\uc2dd\uc774\uc5c8\ub2e4. \uc774\ub294 \ud654\uba74 \uae5c\ube61\uc784\uc774 \ubc1c\uc0dd\ud558\uace0 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc774 \uc800\ud558\ub418\ub294 \ub2e8\uc810\uc774 \uc788\ub2e4. React\ub294 SPA \ubc29\uc2dd\uc744 \ucc44\ud0dd\ud55c\ub2e4. \ud558\ub098\uc758 HTML \ud398\uc774\uc9c0(index.html)\ub9cc \ub85c\ub4dc\ud558\uace0, &#8230; <a title=\"React \uac1c\ubc1c \ud658\uacbd \uc774\ud574\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=72\" aria-label=\"React \uac1c\ubc1c \ud658\uacbd \uc774\ud574\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-72","post","type-post","status-publish","format-standard","hentry","category-react-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/72","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=72"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/72\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}