{"id":765,"date":"2026-05-18T23:00:16","date_gmt":"2026-05-18T15:00:16","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-first-component-3\/"},"modified":"2026-05-19T20:26:10","modified_gmt":"2026-05-19T12:26:10","slug":"react-first-component-3","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-first-component-3\/","title":{"rendered":"React \uccab \ucef4\ud3ec\ub10c\ud2b8 \u2014 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8 (Ch.3)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 740 -->\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 3\ud3b8<\/span>\n  <h1>React \uccab \ucef4\ud3ec\ub10c\ud2b8 \u2014 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8<\/h1>\n  <p>1\ud3b8\uc5d0\uc11c \ubd24\ub358 &#8220;UI \ub294 \ud568\uc218&#8221; \uac00 \uc774\ubc88 \ud3b8\uc5d0\uc11c \uc2e4\uccb4. 5\uc904 \ud568\uc218\ub85c \uccab \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-23.jpg\" alt=\"\ucf54\ub4dc \uc5d0\ub514\ud130 \uc704\uc5d0 \ub5a0 \uc788\ub294 UI \ucef4\ud3ec\ub10c\ud2b8 \uce74\ub4dc \uc77c\ub7ec\uc2a4\ud2b8 \u2014 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8 \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>2\ud3b8\uc5d0\uc11c Vite \ub85c \ub9cc\ub4e0 \ud504\ub85c\uc81d\ud2b8\uc758 <code>App.tsx<\/code> \uac00 \uc0ac\uc2e4 \uccab \ucef4\ud3ec\ub10c\ud2b8\uc600\ub2e4. \ubcf4\uace0 \uc9c0\ub098\uac14\uc744 \ubfd0. \uc774\ubc88 3\ud3b8\uc5d0\uc11c \uadf8 \ud568\uc218\uac00 \uc815\ud655\ud788 \uc5b4\ub5bb\uac8c \ub3d9\uc791\ud558\ub294\uc9c0, \uc0c8 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc5b4\ub5bb\uac8c \ucd94\uac00\ud558\ub294\uc9c0, \uadf8\ub9ac\uace0 React \uac00 \uac15\uc81c\ud558\ub294 <strong>2\uac1c\uc758 \uc774\ub984 \uaddc\uce59<\/strong>\uae4c\uc9c0 \ubcf8\ub2e4.<\/p>\n\n<p>\ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\ub294 React \uc758 \uac00\uc7a5 \uc791\uc740 \ub2e8\uc704. \uc774\uac78 \uc815\ud655\ud788 \uc774\ud574\ud558\uc9c0 \ubabb\ud558\uba74 props\u00b7state\u00b7hook \ub2e4 \ubaa8\ub798\uc131. 5\uc904 \ucf54\ub4dc\ubd80\ud130 \uc2dc\uc791.<\/p>\n\n<h2>1. \ucef4\ud3ec\ub10c\ud2b8 = JSX \ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218<\/h2>\n\n<p>React \uc758 \ucef4\ud3ec\ub10c\ud2b8\ub294 <strong>JSX \ub97c \ubc18\ud658\ud558\ub294 JavaScript \ud568\uc218<\/strong>. \uadf8\uac8c \uc804\ubd80. \uac00\uc7a5 \uc9e7\uc740 \ud615\ud0dc:<\/p>\n\n<div class=\"code-block\">function Greeting() {\n  return &lt;h1&gt;\uc548\ub155, React!&lt;\/h1&gt;;\n}<\/div>\n\n<p>\uc774\uac8c \ucef4\ud3ec\ub10c\ud2b8\ub2e4. <code>function<\/code> + <code>return<\/code> + JSX. \ud074\ub798\uc2a4\ub3c4 <code>this<\/code> \ub3c4 <code>extends<\/code> \ub3c4 \uc5c6\ub2e4. \ud55c\ub54c\ub294 \ud074\ub798\uc2a4 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud45c\uc900\uc774\uc5c8\uc9c0\ub9cc 2020 \ub144 \uc774\ud6c4 <strong>\ud568\uc218\ud615 + Hooks \uac00 \uc0ac\uc2e4\uc0c1 \ub2e8\uc77c \ud45c\uc900<\/strong>. \uc2e0\uaddc \ucf54\ub4dc\uc5d0 \ud074\ub798\uc2a4 \uc4f0\uba74 \uba74\uc811\uc5d0\uc11c \uc758\uc544\ud55c \ub208\ube5b \ubc1b\ub294\ub2e4.<\/p>\n\n<h2>2. \ud638\ucd9c \ubc29\ubc95 \u2014 \ud568\uc218\uac00 \uc544\ub2c8\ub77c JSX \ud0dc\uadf8\ub85c<\/h2>\n\n<p>\uc77c\ubc18 JavaScript \ud568\uc218\ub294 <code>Greeting()<\/code> \uc73c\ub85c \ud638\ucd9c. React \ucef4\ud3ec\ub10c\ud2b8\ub294 <strong>JSX \ud0dc\uadf8<\/strong> \ub85c \ud638\ucd9c\ud55c\ub2e4.<\/p>\n\n<div class=\"code-block\">\/\/ \u274c React \uc5d0\uc120 \uc774\ub807\uac8c \uc548 \ud568\nconst ui = Greeting();\n\n\/\/ \u2705 JSX \ud0dc\uadf8\ub85c \ud638\ucd9c\nfunction App() {\n  return (\n    &lt;div&gt;\n      &lt;Greeting \/&gt;\n      &lt;Greeting \/&gt;\n    &lt;\/div&gt;\n  );\n}<\/div>\n\n<p>\uc774 \ud45c\uae30\uac00 \ucc98\uc74c\uc5d4 \uc5b4\uc0c9\ud558\uc9c0\ub9cc \uc758\ubbf8\uac00 \ud06c\ub2e4. React \uac00 &#8220;<code>&lt;Greeting \/&gt;<\/code> \uc704\uce58\uc5d0 Greeting \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9c8\uc6b4\ud2b8&#8221; \ub77c\ub294 \uba85\ub839\uc73c\ub85c \ud574\uc11d. \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc5ec\ub7ec \ubc88 \ubc15\uc544\ub3c4 \uac01\uac01 \ub3c5\ub9bd \uc778\uc2a4\ud134\uc2a4\ub85c \ub3d9\uc791.<\/p>\n\n<div class=\"databox\">\n<strong>\ud575\uc2ec \ucc28\uc774<\/strong> \u2014 <code>Greeting()<\/code> \uc740 \uadf8\ub0e5 \ud568\uc218 \ud638\ucd9c (\ud55c \ubc88 \ud3c9\uac00\ud558\uace0 \ub05d). <code>&lt;Greeting \/&gt;<\/code> \uc740 React \uac00 \uad00\ub9ac\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc778\uc2a4\ud134\uc2a4 (state\u00b7effect\u00b7\uc7ac\ub80c\ub354 \ucd94\uc801). React Hooks \uac00 \ud568\uc218 \uc548\uc5d0\uc11c \uc791\ub3d9\ud558\ub824\uba74 \ud6c4\uc790 \ubc29\uc2dd\uc774 \ud544\uc218.\n<\/div>\n\n<h2>3. \ub450 \uac00\uc9c0 \uc774\ub984 \uaddc\uce59 \u2014 \uc5b4\uae30\uba74 \uc791\ub3d9 \uc548 \ud568<\/h2>\n\n<p>React \uac00 \ucf54\ub4dc \ud615\ud0dc\ub85c \uac15\uc81c\ud558\ub294 \uc774\ub984 \uaddc\uce59 \ub458. \uc5b4\uae30\uba74 \uc5d0\ub7ec\uac00 \uc548 \ub098\ub3c4 \ud654\uba74\uc774 \ube44\uc5b4 \ubcf4\uc774\ub294 \ud568\uc815.<\/p>\n\n<h3>\uaddc\uce59 1 \u2014 \ucef4\ud3ec\ub10c\ud2b8 \uc774\ub984\uc740 \ub300\ubb38\uc790 \uc2dc\uc791<\/h3>\n\n<p>JSX \ud30c\uc11c\ub294 <strong>\ub300\ubb38\uc790\ub85c \uc2dc\uc791<\/strong>\ud558\uba74 \ucef4\ud3ec\ub10c\ud2b8, \uc18c\ubb38\uc790\uba74 HTML \ud0dc\uadf8\ub85c \ud574\uc11d\ud55c\ub2e4.<\/p>\n\n<div class=\"code-block\">function greeting() {       \/\/ \u274c \uc18c\ubb38\uc790 \uc2dc\uc791\n  return &lt;h1&gt;\uc548\ub155&lt;\/h1&gt;;\n}\n\/\/ &lt;greeting \/&gt; \uc0ac\uc6a9 \uc2dc React \ub294 &#8220;greeting \uc774\ub77c\ub294 HTML \ud0dc\uadf8&#8221; \ub85c \ud574\uc11d\n\/\/ \ube0c\ub77c\uc6b0\uc800\uac00 \ubaa8\ub974\ub294 \ud0dc\uadf8 \u2192 \ud654\uba74\uc5d0 \uc544\ubb34\uac83\ub3c4 \uc548 \ubcf4\uc784 (\uc5d0\ub7ec\ub3c4 \uc5c6\uc74c)\n\nfunction Greeting() {       \/\/ \u2705 \ub300\ubb38\uc790 \uc2dc\uc791\n  return &lt;h1&gt;\uc548\ub155&lt;\/h1&gt;;\n}\n\/\/ &lt;Greeting \/&gt; \u2192 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc815\uc0c1 \ub9c8\uc6b4\ud2b8<\/div>\n\n<h3>\uaddc\uce59 2 \u2014 \ud30c\uc77c\u00b7\ucef4\ud3ec\ub10c\ud2b8 \uc774\ub984 \uc77c\uce58 (\uad00\ub840)<\/h3>\n\n<p>\uac15\uc81c\ub294 \uc544\ub2c8\uc9c0\ub9cc React \uc0dd\ud0dc\uacc4 \ud45c\uc900 \uad00\ub840. <code>Greeting<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub294 <code>Greeting.tsx<\/code> \ud30c\uc77c\uc5d0. \uc548 \uc9c0\ud0a4\uba74 import \ud560 \ub54c \ud5f7\uac08\ub9ac\uace0 IDE \uc790\ub3d9\uc644\uc131\ub3c4 \uc5b4\uae0b\ub09c\ub2e4. \ud55c \ud30c\uc77c\uc5d0 \ucef4\ud3ec\ub10c\ud2b8 \uc5ec\ub7ec \uac1c \ub458 \ub550 \uac00\uc7a5 \uc911\uc2ec \ucef4\ud3ec\ub10c\ud2b8 \uc774\ub984\uc744 \ud30c\uc77c\uba85\uc73c\ub85c.<\/p>\n\n<h2>4. \ud30c\uc77c \ubd84\ub9ac \u2014 \uccab \ubaa8\ub4c8 import\u00b7export<\/h2>\n\n<p>\uc2e4\uc81c \uc791\uc5c5 \ud750\ub984. <code>src\/components\/Greeting.tsx<\/code> \ud30c\uc77c\uc744 \uc0c8\ub85c \ub9cc\ub4e0\ub2e4:<\/p>\n\n<div class=\"code-block\">\/\/ src\/components\/Greeting.tsx\nexport function Greeting() {\n  return &lt;h1&gt;\uc548\ub155, React!&lt;\/h1&gt;;\n}<\/div>\n\n<p><code>App.tsx<\/code> \uc5d0\uc11c \uac00\uc838\uc640 \uc0ac\uc6a9:<\/p>\n\n<div class=\"code-block\">\/\/ src\/App.tsx\nimport { Greeting } from &#8216;.\/components\/Greeting&#8217;;\n\nfunction App() {\n  return (\n    &lt;div&gt;\n      &lt;Greeting \/&gt;\n    &lt;\/div&gt;\n  );\n}\nexport default App;<\/div>\n\n<p>\ub450 \uac00\uc9c0 \ud328\ud134 \u2014 <strong>named export<\/strong> (<code>export function Greeting<\/code>) \uc640 <strong>default export<\/strong> (<code>export default Greeting<\/code>). \ub458 \ub2e4 \uac00\ub2a5\ud558\uc9c0\ub9cc named \uac00 \uad8c\uc7a5 \u2014 IDE \uc790\ub3d9 import\u00b7rename refactor\u00b7tree shaking \ubaa8\ub450 \uc6b0\uc704. default \ub294 \ud55c \ud30c\uc77c\uc5d0 \ucef4\ud3ec\ub10c\ud2b8 1\uac1c + \uc678\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac \ud638\ud658 \uc815\ub3c4.<\/p>\n\n<div class=\"warnbox\">\n<strong>\ud754\ud55c \uccab \uc2e4\uc218<\/strong> \u2014 import \uacbd\ub85c\uc5d0 <code>.tsx<\/code> \ud655\uc7a5\uc790 \uc801\uae30 (Vite\/TS \ub294 \uc790\ub3d9 \ud574\uc11d). \ub610\ub294 import \ud588\ub294\ub370 \uc0ac\uc6a9 \uc548 \ud568 \u2192 \ube4c\ub4dc\ub294 \ud1b5\uacfc\ud574\ub3c4 \ubc88\ub4e4\uc5d0 \ub4e4\uc5b4\uac10 \u2192 eslint \uac00 \uc7a1\uc544\uc900\ub2e4. \ucc98\uc74c\uc5d4 \uc5d0\ub514\ud130 \ube68\uac04 \uc904\uc744 \ubb34\uc2dc \ub9d0 \uac83.\n<\/div>\n\n<p>\uc774\ubc88 3\ud3b8\uc73c\ub85c &#8220;\ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30 + \ud638\ucd9c + \ubd84\ub9ac&#8221; \uc758 \uc0ac\uc774\ud074\uc774 \uc644\uc131. 4\ud3b8\uc5d0\uc11c\ub294 JSX \uc758 \uc9c4\uc9dc \ubb38\ubc95 (\uc911\uad04\ud638 \ud45c\ud604\uc2dd\u00b7className\u00b7\uc774\ubca4\ud2b8\u00b7Fragment) \uc73c\ub85c \ub4e4\uc5b4\uac04\ub2e4.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00<\/h3>\n<p>React \uad50\uc7ac 4\ud3b8 \u2014 JSX \ubb38\ubc95 \uc815\ubcf5. HTML \uacfc \ub2e4\ub978 5\uac00\uc9c0, \uc911\uad04\ud638 \ud45c\ud604\uc2dd, Fragment, \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\uae4c\uc9c0.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-intro-1\/\">1\ud3b8 \uc785\ubb38<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-vite-setup-2\/\">2\ud3b8 Vite<\/a> \u00b7\n<strong>3\ud3b8 \uccab \ucef4\ud3ec\ub10c\ud2b8<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8 \u2014 JSX \ubc18\ud658\u00b7\ud0dc\uadf8\ub85c \ud638\ucd9c\u00b7\ub300\ubb38\uc790 \uc774\ub984 \uaddc\uce59\u00b7\ud30c\uc77c \ubd84\ub9ac. React \uad50\uc7ac 3\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":740,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-765","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\/765","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=765"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/765\/revisions"}],"predecessor-version":[{"id":792,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/765\/revisions\/792"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/740"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}