{"id":763,"date":"2026-05-18T23:00:00","date_gmt":"2026-05-18T15:00:00","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-intro-1\/"},"modified":"2026-05-19T20:26:07","modified_gmt":"2026-05-19T12:26:07","slug":"react-intro-1","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-intro-1\/","title":{"rendered":"React \uc785\ubb38 (Ch.1)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 730 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root {--color-primary:#0891b2;--color-accent:#06b6d4;--color-bg:#f8fafc;--color-bg-card:#fff;--color-text:#0f172a;--color-text-muted:#64748b;--hero-start:#0f172a;--hero-end:#0891b2;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 24px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:80px 24px 60px;text-align:center;}\n.hero .eyebrow{display:inline-block;font-size:14px;color:#67e8f9;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;}\n.hero h1{font-size:36px;margin:0 0 16px;line-height:1.3;font-weight:800;}\n.hero p{color:#cffafe;font-size:18px;max-width:640px;margin:0 auto;line-height:1.6;}\n.hero img{width:100%;max-width:640px;height:auto;margin:32px auto 0;border-radius:10px;display:block;}\narticle{padding-top:48px;}\narticle h2{font-size:26px;margin:56px 0 20px;padding-left:14px;border-left:5px solid var(--color-accent);line-height:1.4;}\narticle h3{font-size:19px;margin:32px 0 12px;color:var(--color-primary);}\narticle p{margin:16px 0;}\narticle strong{color:var(--color-primary);font-weight:700;}\narticle code{background:#ecfeff;padding:2px 8px;border-radius:4px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;color:#0e7490;}\n.databox{background:#ecfeff;border-left:4px solid var(--color-accent);padding:16px 20px;margin:24px 0;border-radius:0 8px 8px 0;font-size:15.5px;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);padding:16px 20px;margin:24px 0;border-radius:8px;font-size:15.5px;}\n.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;}\ntable{width:100%;border-collapse:collapse;font-size:15px;background:var(--color-bg-card);}\nth,td{padding:11px 12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top;}\nth{background:#f1f5f9;font-weight:700;color:#0f172a;}\ntd:first-child,th:first-child{font-weight:700;}\n@media (max-width:560px){.tablewrap table,.tablewrap thead,.tablewrap tbody,.tablewrap tr,.tablewrap th,.tablewrap td{display:block;width:auto;}.tablewrap thead{display:none;}.tablewrap tr{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;}.tablewrap td{border:none;border-bottom:1px solid #f1f5f9;padding:9px 14px;}.tablewrap td:first-child{background:#f1f5f9;font-weight:800;font-size:15.5px;}.tablewrap td:last-child{border-bottom:none;}.tablewrap td[data-label]::before{content:attr(data-label) \" \u2014 \";font-weight:700;color:var(--color-primary);}}\n.code-block{background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:8px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.6;margin:20px 0;overflow-x:auto;white-space:pre;}\n.cta{background:linear-gradient(135deg,#0891b2 0%,#06b6d4 100%);color:#fff;padding:28px 24px;border-radius:12px;margin:48px 0 0;text-align:center;}\n.cta h3{color:#fff;margin:0 0 8px;font-size:20px;}\n.cta p{color:#cffafe;margin:0;font-size:15.5px;}\n.footer-nav{margin-top:32px;padding-top:20px;border-top:1px solid #e2e8f0;font-size:14px;color:var(--color-text-muted);}\n.footer-nav a{color:var(--color-primary);text-decoration:none;}\n@media (max-width:480px){.hero h1{font-size:26px;}.hero p{font-size:16px;}article h2{font-size:21px;}article h3{font-size:17px;}body{font-size:16px;}}\n<\/style>\n<section class=\"hero\">\n  <span class=\"eyebrow\">React \uad50\uc7ac \u00b7 \uc785\ubb38 1\ud3b8 \u00b7 \uc2dc\ub9ac\uc988 \uc2dc\uc791<\/span>\n  <h1>React\ub780 \ubb34\uc5c7\uc778\uac00? UI \ub77c\uc774\ube0c\ub7ec\ub9ac \uc785\ubb38<\/h1>\n  <p>UI \ub97c \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc870\ub9bd\ud558\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac. \uc785\ubb38 1\ud3b8\uc73c\ub85c \ud070 \uadf8\ub9bc\ubd80\ud130.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-21.jpg\" alt=\"\uc791\uc740 \ubaa8\ub4c8 \ucef4\ud3ec\ub10c\ud2b8 \ube14\ub85d\ub4e4\uc774 \ud37c\uc990\ucc98\ub7fc \uc870\ub9bd\ub418\uc5b4 UI \uac00 \ub418\ub294 \uc77c\ub7ec\uc2a4\ud2b8 \u2014 React \ucef4\ud3ec\ub10c\ud2b8 \ubaa8\ub378 \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>JavaScript \ub97c \uc5b4\ub290 \uc815\ub3c4 \ub9cc\uc9c8 \uc904 \uc54c\uac8c \ub418\uba74 \uc790\uc5f0\uc2a4\ub7fd\uac8c \ub9c8\uc8fc\uce58\ub294 \ub2e8\uc5b4 \u2014 <strong>React<\/strong>. \ucc44\uc6a9 \uacf5\uace0\uc758 70~80% \uac00 &#8220;React \uacbd\ud5d8 \uc6b0\ub300&#8221; \ub97c \uc801\uc5b4\ub450\uace0, \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\uc758 \uc57d \uc808\ubc18\uc774 \ub9e4\uc77c \uc4f4\ub2e4. \uadf8\ub798\uc11c \ud55c \ubc88\ucbe4\uc740 &#8220;\uc774\uac8c \ubb50\uae38\ub798&#8221; \uc815\ub9ac\ud558\uace0 \uac00\uc57c \ud55c\ub2e4.<\/p>\n\n<p>\uc774\ubc88 1\ud3b8\uc740 \ucf54\ub4dc\ubcf4\ub2e4 <strong>\ud070 \uadf8\ub9bc<\/strong>. React \uac00 \uc815\ud655\ud788 \uc5b4\ub5a4 \ub3c4\uad6c\uc778\uc9c0, Vue\/Svelte\/Angular \uc640 \ubb50\uac00 \ub2e4\ub978\uc9c0, \uc5b4\ub5a4 \uc0ac\ub78c\uc774 \uc65c \uc4f0\ub294\uc9c0 \u2014 \ub2e4\uc74c \ud3b8\ubd80\ud130 \ubcf8\uaca9 \uc2dc\uc791\ud558\uae30 \uc804 \uba38\ub9bf\uc18d\uc5d0 \uc88c\ud45c\ub97c \ubc15\ub294\ub2e4.<\/p>\n\n<h2>1. React \ub294 &#8220;\ud504\ub808\uc784\uc6cc\ud06c&#8221; \uac00 \uc544\ub2c8\ub77c &#8220;\ub77c\uc774\ube0c\ub7ec\ub9ac&#8221;<\/h2>\n\n<p>\uacf5\uc2dd \ubb38\uc11c \uccab \uc904\uc5d0 \uc801\ud600\uc788\ub2e4 \u2014 <strong>&#8220;A JavaScript library for building user interfaces&#8221;<\/strong>. <em>framework<\/em> \uac00 \uc544\ub2c8\ub2e4. \uc774 \ub2e8\uc5b4 \uc120\ud0dd\uc774 \uc758\uc678\ub85c \ud070 \uc758\ubbf8.<\/p>\n\n<p>\ud504\ub808\uc784\uc6cc\ud06c(Angular\u00b7Next.js)\ub294 \ub77c\uc6b0\ud305\u00b7\uc0c1\ud0dc\uad00\ub9ac\u00b7\ub370\uc774\ud130 fetch\u00b7\uc778\uc99d\uc744 \ub2e4 \uc815\ud574\uc11c \uc900\ub2e4. &#8220;\uc774 \uae38\ub85c \uac00\uc138\uc694&#8221; \uc2dd. \ubc18\ub300\ub85c \ub77c\uc774\ube0c\ub7ec\ub9ac(React)\ub294 <strong>UI \ub80c\ub354\ub9c1 \ud55c \uac00\uc9c0<\/strong>\ub9cc \ucc45\uc784\uc9c0\uace0 \ub098\uba38\uc9c0\ub294 \uc0ac\uc6a9\uc790 \uc120\ud0dd. \ub77c\uc6b0\ud130\ub294 React Router \uc4f0\ub4e0 TanStack Router \uc4f0\ub4e0, \uc0c1\ud0dc\ub294 Redux \ub4e0 Zustand \ub4e0 \uc790\uc720.<\/p>\n\n<div class=\"databox\">\n<strong>\uc758\ubbf8<\/strong> \u2014 React \uc785\ubb38\uc740 &#8220;React \ub9cc \ubc30\uc6b0\uba74 \ub05d&#8221; \uc774 \uc544\ub2c8\ub77c &#8220;React + \ub77c\uc6b0\ud130 + \uc0c1\ud0dc\uad00\ub9ac + \ube4c\ub4dc \ub3c4\uad6c&#8221; \uac19\uc774 \uc775\ud788\ub294 \uc5ec\uc815. \uccab \uc9c4\uc785 \uc7a5\ubcbd\uc774 Vue \ubcf4\ub2e4 \ub192\uc740 \uc774\uc720. \ub300\uc2e0 \ubcf8\uc778 \uc785\ub9db\uc5d0 \ub9de\ub294 \ub3c4\uad6c\ub97c \uace8\ub77c \uc870\ud569\ud558\ub294 \uc790\uc720\uac00 \uc788\ub2e4.\n<\/div>\n\n<h2>2. \ud575\uc2ec \uc544\uc774\ub514\uc5b4 \u2014 \ucef4\ud3ec\ub10c\ud2b8 + JSX + \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130<\/h2>\n\n<p>React \uac00 \uac00\ub974\uce58\ub294 3\uac00\uc9c0 \uac1c\ub150. \uc774 \uc14b\uc774 React \uc758 \ubaa8\ub4e0 \uac83.<\/p>\n\n<h3>\ucef4\ud3ec\ub10c\ud2b8 \u2014 UI \ub97c \ud568\uc218\ub85c<\/h3>\n\n<p>React \uc758 \ubaa8\ub4e0 UI \ub294 <strong>\ud568\uc218<\/strong>. \ubc84\ud2bc \ud558\ub098\ub3c4, \ud398\uc774\uc9c0 \uc804\uccb4\ub3c4 \ud568\uc218. \ud568\uc218\uac00 &#8220;\uc774 UI \ub97c \uadf8\ub824\ub2ec\ub77c&#8221; \ub294 \uc124\uba85\uc744 \ubc18\ud658\ud558\uba74 React \uac00 \ud654\uba74\uc5d0 \uadf8\ub9b0\ub2e4. \ud568\uc218\ub97c \ub2e4\ub978 \ud568\uc218 \uc548\uc5d0 \ub07c\uc6cc\ub123\uc73c\uba74 \ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac.<\/p>\n\n<div class=\"code-block\">function Welcome({ name }) {\n  return &lt;h1&gt;\uc548\ub155, {name}\ub2d8!&lt;\/h1&gt;;\n}\nfunction App() {\n  return &lt;Welcome name=&#8221;\ubc15\uc900\uc131&#8221; \/&gt;;\n}<\/div>\n\n<h3>JSX \u2014 JavaScript \uc548\uc5d0 HTML<\/h3>\n\n<p>\uc704 \ucf54\ub4dc\uc758 <code>&lt;h1&gt;...&lt;\/h1&gt;<\/code> \ubd80\ubd84\uc774 <strong>JSX<\/strong>. \uc9c4\uc9dc HTML \uc774 \uc544\ub2c8\ub77c JavaScript \ud45c\ud604\uc2dd\uc73c\ub85c \ubcc0\ud658\ub418\ub294 \ubb38\ubc95. <code>{name}<\/code> \uac19\uc740 \uc911\uad04\ud638\ub85c JS \uac12\uc744 \uc9c1\uc811 \ubc15\uc744 \uc218 \uc788\ub294 \uac8c \ud575\uc2ec \u2014 \ud15c\ud50c\ub9bf \ubb38\uc790\uc5f4 \ubcf4\uac04\ubcf4\ub2e4 \ud6e8\uc52c \uc790\uc5f0\uc2a4\ub7fd\ub2e4.<\/p>\n\n<h3>\ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \u2014 \uc704\uc5d0\uc11c \uc544\ub798\ub85c\ub9cc<\/h3>\n\n<p>\ub370\uc774\ud130\ub294 \ubd80\ubaa8 \u2192 \uc790\uc2dd (<code>props<\/code>) \uc73c\ub85c\ub9cc \ud750\ub978\ub2e4. \uc790\uc2dd\uc774 \ubd80\ubaa8\ub97c \uc9c1\uc811 \ubabb \ubc14\uafbc\ub2e4. \ubc14\ub00c\uba74 \ubd80\ubaa8\uac00 \uc790\uc2e0\uc744 \ub2e4\uc2dc \uadf8\ub9ac\uace0, \uadf8 \uacb0\uacfc \uc790\uc2dd\ub3c4 \ub2e4\uc2dc \uadf8\ub824\uc9c4\ub2e4. \ucc98\uc74c\uc5d4 \ub2f5\ub2f5\ud574 \ubcf4\uc774\uc9c0\ub9cc, \ub514\ubc84\uae45\ud560 \ub54c &#8220;\uc774 \uac12\uc774 \uc5b4\ub514\uc11c \uc654\uc9c0&#8221; \ucd94\uc801\uc774 \uba85\ud655.<\/p>\n\n<h2>3. Vue \u00b7 Svelte \u00b7 Angular \uc640 \ud55c \uc904 \ube44\uad50<\/h2>\n\n<p>React \ub97c \uace0\ub974\uae30 \uc804\uc5d0 \uc606 \ub3d9\ub124\ub3c4 \ubcf8\ub2e4. 2026\ub144 \uae30\uc900 4 \uac15\uc790\uc758 \ucc28\uc774.<\/p>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>\ub3c4\uad6c<\/th><th>\ud55c \uc904<\/th><th>\uc785\ubb38 \ub09c\uc774\ub3c4<\/th><th>\ucc44\uc6a9 \uc2dc\uc7a5<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>React<\/td><td data-label=\"\ud55c \uc904\">UI \ub77c\uc774\ube0c\ub7ec\ub9ac, \uc870\ud569 \uc790\uc720 \u2605<\/td><td data-label=\"\uc785\ubb38 \ub09c\uc774\ub3c4\">\uc911 (\ucef4\ud3ec\ub10c\ud2b8+\ud6c5 \uc775\ud788\uba74 \ubcf8\uada4\ub3c4)<\/td><td data-label=\"\ucc44\uc6a9 \uc2dc\uc7a5\">\u2605\u2605\u2605 JS \ud504\ub808\uc784\uc6cc\ud06c \ucc44\uc6a9\uc758 70~80%<\/td><\/tr>\n<tr><td>Vue<\/td><td data-label=\"\ud55c \uc904\">\uc9c4\uc785 \ubd80\ub4dc\ub7ec\uc6b4 \ud504\ub808\uc784\uc6cc\ud06c<\/td><td data-label=\"\uc785\ubb38 \ub09c\uc774\ub3c4\">\ud558 (\ud15c\ud50c\ub9bf \ubb38\ubc95 \uc9c1\uad00\uc801)<\/td><td data-label=\"\ucc44\uc6a9 \uc2dc\uc7a5\">\u2605\u2605 \uc544\uc2dc\uc544\uad8c\u00b7\uc911\uc18c\uae30\uc5c5<\/td><\/tr>\n<tr><td>Svelte<\/td><td data-label=\"\ud55c \uc904\">\ucef4\ud30c\uc77c\ub7ec \u2014 \ub7f0\ud0c0\uc784 \uac70\uc758 \uc5c6\uc74c<\/td><td data-label=\"\uc785\ubb38 \ub09c\uc774\ub3c4\">\ud558 (\ucf54\ub4dc\ub7c9 \ucd5c\uc18c)<\/td><td data-label=\"\ucc44\uc6a9 \uc2dc\uc7a5\">\u2605 \uc131\uc7a5 \uc911, \uc2e0\uaddc \ud504\ub85c\uc81d\ud2b8 \uc704\uc8fc<\/td><\/tr>\n<tr><td>Angular<\/td><td data-label=\"\ud55c \uc904\">\uc644\uc804 \ud480\uc138\ud2b8 \uc5d4\ud130\ud504\ub77c\uc774\uc988<\/td><td data-label=\"\uc785\ubb38 \ub09c\uc774\ub3c4\">\uc0c1 (TS\u00b7RxJS\u00b7DI \ub3d9\uc2dc \ud559\uc2b5)<\/td><td data-label=\"\ucc44\uc6a9 \uc2dc\uc7a5\">\u2605\u2605 \ub300\uae30\uc5c5\u00b7\uae08\uc735\uad8c<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<div class=\"databox\">\n<strong>\ud55c \uc904 \ucd94\ucc9c<\/strong> \u2014 \uc77c\uc790\ub9ac\u00b7\uc0dd\ud0dc\uacc4 \uc6b0\uc120\uc774\uba74 React, \uc9c4\uc785 \ub09c\uc774\ub3c4 \uc6b0\uc120\uc774\uba74 Vue, \uac00\ubcbc\uc6c0 \uc6b0\uc120\uc774\uba74 Svelte, \uc0ac\ub0b4 \ud45c\uc900\uc5d0 \ub9de\ucdb0\uc57c \ud558\uba74 Angular. \ubc15\uc900\uc131\ub2d8 \ud68c\uc0ac\ucc98\ub7fc \ud480\uc2a4\ud0dd \uc6b4\uc601\ud558\uba74\uc11c \ucc44\uc6a9\ub3c4 \uace0\ub824\ud55c\ub2e4\uba74 React + Next.js \uc870\ud569\uc774 \uc0ac\uc2e4\uc0c1 \ud45c\uc900.\n<\/div>\n\n<h2>4. \ub204\uac00 \uc65c \uc4f0\ub294\uac00 \u2014 \uc2e4\uc804 \uc2dc\uadf8\ub110 3\uac00\uc9c0<\/h2>\n\n<p>React \ub97c \ub3c4\uc785\ud560\uc9c0 \ub9d0\uc9c0 \uacb0\uc815\ud560 \ub54c \ubcf4\ub294 \uc2e0\ud638 \uc14b. \ud558\ub098\ub77c\ub3c4 \ud574\ub2f9\ud558\uba74 React \uac00 \ub2f5\uc774 \ub420 \uac00\ub2a5\uc131 \ub192\ub2e4.<\/p>\n\n<h3>\uc2e0\ud638 1 \u2014 \uac19\uc740 UI \uc870\uac01\uc774 5\ubc88 \uc774\uc0c1 \ubc18\ubcf5<\/h3>\n\n<p>\ubc84\ud2bc\u00b7\uce74\ub4dc\u00b7\ubaa8\ub2ec\u00b7input field \u2014 \ube44\uc2b7\ud55c \ubaa8\uc591\uc774 \ud398\uc774\uc9c0\ub9c8\ub2e4 \ubc18\ubcf5\ub41c\ub2e4\uba74 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ube7c\uc11c \uc7ac\uc0ac\uc6a9. jQuery \uc2dc\ub300\ucc98\ub7fc \ub9e4\ubc88 HTML \uc744 \uc0c8\ub85c \uc4f0\ub294 \ub300\uc2e0 \ud568\uc218 \ud55c \ubc88 \uc815\uc758, \uc5b4\ub514\uc11c\ub4e0 \ud638\ucd9c.<\/p>\n\n<h3>\uc2e0\ud638 2 \u2014 \ub370\uc774\ud130\uac00 \ubc14\ub00c\uba74 UI \uac00 \uc790\ub3d9 \uac31\uc2e0\ub418\uc5b4\uc57c<\/h3>\n\n<p>&#8220;\uc88b\uc544\uc694 \ud074\ub9ad \u2192 \uce74\uc6b4\ud2b8 +1 \u2192 \ud654\uba74 \uc989\uc2dc \ubc18\uc601&#8221;. \uc774\ub7f0 \ud750\ub984\uc744 \uc9c1\uc811 DOM \uc870\uc791\uc73c\ub85c \uc9dc\uba74 \uace7 \ucf54\ub4dc\uac00 \uc2a4\ud30c\uac8c\ud2f0\uac00 \ub41c\ub2e4. React \ub294 <strong>&#8220;\uc0c1\ud0dc\uac00 \ubc14\ub00c\uba74 \uadf8 \ubd80\ubd84\ub9cc \ub2e4\uc2dc \uadf8\ub9b0\ub2e4&#8221;<\/strong> \uac00 \uae30\ubcf8 \ub3d9\uc791. \uc790\ub3d9.<\/p>\n\n<h3>\uc2e0\ud638 3 \u2014 \ubaa8\ubc14\uc77c\u00b7\ub124\uc774\ud2f0\ube0c \uc571\ub3c4 \uac19\uc774 \uac1c\ubc1c<\/h3>\n\n<p>React \ub97c \ubc30\uc6b0\uba74 <strong>React Native<\/strong> \ub85c iOS\u00b7Android \uc571\ub3c4 \uac19\uc740 \ud328\ud134\uc73c\ub85c \uac1c\ubc1c \uac00\ub2a5. \ud55c \ubc88 \ubc30\uc6b4 \ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uace0\ubc29\uc2dd\uc774 \uc6f9\u00b7\ubaa8\ubc14\uc77c\u00b7\uc2ec\uc9c0\uc5b4 \ub370\uc2a4\ud06c\ud0d1(Electron+React) \uae4c\uc9c0 \ud655\uc7a5. &#8220;\ud55c \ubc88 \ubc30\uc6c0 \u2014 \uc5b4\ub514\uc11c\ub098 \uc0ac\uc6a9&#8221; \uc758 \uc9c4\uc9dc \uc758\ubbf8.<\/p>\n\n<div class=\"warnbox\">\n<strong>\uc548 \ub9de\ub294 \uacbd\uc6b0<\/strong> \u2014 \uc815\uc801 \ucf58\ud150\uce20 \uc704\uc8fc (\ud68c\uc0ac \uc18c\uac1c\u00b7\ube14\ub85c\uadf8) \uba74 React \uac00 \uacfc\ud55c \ub3c4\uad6c. Astro\u00b7Next.js Static\u00b7\uc77c\ubc18 HTML \uc774 \ub354 \ube60\ub974\uace0 SEO \ub3c4 \uc720\ub9ac. React \ub294 &#8220;\uc0ac\uc6a9\uc790 \uc778\ud130\ub799\uc158\u00b7\uc2e4\uc2dc\uac04 \uac31\uc2e0&#8221; \uc774 \ud575\uc2ec\uc77c \ub54c \uc9c4\uac00\uac00 \ub098\uc628\ub2e4.\n<\/div>\n\n<p>2\ud3b8\uc5d0\uc11c\ub294 \uc2e4\uc81c \uc124\uce58 (Vite \ub85c 5\ubd84 \uc548\uc5d0 \uccab \ud504\ub85c\uc81d\ud2b8) \ubd80\ud130 \uc2dc\uc791\ud55c\ub2e4. \uc774\ubc88 1\ud3b8\uc740 \uadf8 \uc804\uc5d0 &#8220;\uc65c \uc774 \ub3c4\uad6c\ub97c \uace8\ub790\ub294\uc9c0&#8221; \uc815\ub9ac\ud55c \uc148.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00<\/h3>\n<p>React \uad50\uc7ac 2\ud3b8 \u2014 Vite \ub85c \uccab React \ud504\ub85c\uc81d\ud2b8 \ub9cc\ub4e4\uae30. <code>npm create vite@latest<\/code> \ud55c \uc904\ub85c \uc2dc\uc791\ud558\ub294 \ubaa8\ub358 \uac1c\ubc1c \ud658\uacbd \uc14b\uc5c5.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 \u00b7\n<strong>1\ud3b8 \uc785\ubb38<\/strong> \u00b7\n2\ud3b8 Vite \uc124\uce58 (\uc791\uc131 \uc608\uc815) \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/typescript-intro-1\/\">\uad00\ub828: TypeScript 1\ud3b8<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/javascript-intro-1\/\">\uad00\ub828: JavaScript 1\ud3b8<\/a>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>React \ub294 UI \ucef4\ud3ec\ub10c\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac. Vue\u00b7Svelte\u00b7Angular \ube44\uad50 + \uccab \ucf54\ub4dc.<\/p>\n","protected":false},"author":1,"featured_media":730,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-763","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=763"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/763\/revisions"}],"predecessor-version":[{"id":790,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/763\/revisions\/790"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/730"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}