{"id":768,"date":"2026-05-18T23:00:24","date_gmt":"2026-05-18T15:00:24","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-jsx-syntax-4\/"},"modified":"2026-05-19T20:26:11","modified_gmt":"2026-05-19T12:26:11","slug":"react-jsx-syntax-4","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-jsx-syntax-4\/","title":{"rendered":"React JSX \ubb38\ubc95 \u2014 HTML \uacfc \ub2e4\ub978 5\uac00\uc9c0 (Ch.4)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 741 -->\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 4\ud3b8<\/span>\n  <h1>React JSX \ubb38\ubc95 \u2014 HTML \uacfc \ub2e4\ub978 5\uac00\uc9c0<\/h1>\n  <p>JSX \ub294 HTML \ucc98\ub7fc \ubcf4\uc774\uc9c0\ub9cc JavaScript. 5\uac00\uc9c0 \ucc28\uc774\ub9cc \uba38\ub9ac\uc5d0 \ubc15\uc73c\uba74 \ub05d.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-24.jpg\" alt=\"\ucf54\ub4dc \uc5d0\ub514\ud130 \uc548\uc5d0\uc11c HTML \ud0dc\uadf8\uc640 JavaScript \uac00 \uc911\uad04\ud638\ub85c \uc790\uc5f0\uc2a4\ub7fd\uac8c \uc11e\uc774\ub294 \uc77c\ub7ec\uc2a4\ud2b8 \u2014 JSX \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>3\ud3b8\uc758 <code>&lt;h1&gt;\uc548\ub155, React!&lt;\/h1&gt;<\/code> \uac00 JSX. HTML \ucc98\ub7fc \ubcf4\uc600\uc9c0\ub9cc \uc0ac\uc2e4\uc740 <strong>JavaScript \ud45c\ud604\uc2dd<\/strong>. Babel\/esbuild \uac00 \ucef4\ud30c\uc77c \uc2dc <code>React.createElement('h1', null, '\uc548\ub155, React!')<\/code> \uac19\uc740 \ud568\uc218 \ud638\ucd9c\ub85c \ubc14\uafbc\ub2e4. \uadf8\ub798\uc11c JS \ubcc0\uc218\ub97c \ub07c\uc6b8 \uc218 \uc788\uace0, \uc870\uac74\ubb38\ub3c4 \uac00\ub2a5\ud558\uace0, \ud568\uc218\ub3c4 \uc9c1\uc811 \ubd80\ub978\ub2e4.<\/p>\n\n<p>\uc774\ubc88 4\ud3b8\uc740 JSX \uc640 HTML \uc758 <strong>5\uac00\uc9c0 \ucc28\uc774<\/strong> + \uc911\uad04\ud638 \ud45c\ud604\uc2dd\u00b7Fragment\u00b7\uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\uae4c\uc9c0. \ud55c \ubc88 \uc815\ub9ac\ud558\uba74 \ud3c9\uc0dd \ud5f7\uac08\ub9b4 \uc77c \uc5c6\ub2e4.<\/p>\n\n<h2>1. HTML \uacfc \ub2e4\ub978 5\uac00\uc9c0<\/h2>\n\n<p>\ucc98\uc74c JSX \ub97c \ubcf4\uba74 \uc775\uc219\ud558\uba74\uc11c \uc5b4\uc0c9\ud558\ub2e4. \ucc28\uc774\uac00 \uc815\ud655\ud788 5\uac1c\ub77c\uc11c \ud55c \ubc88\uc5d0 \uc678\uc6b0\ub294 \uac8c \ud6a8\uc728\uc801.<\/p>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>\ucc28\uc774<\/th><th>HTML<\/th><th>JSX<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>class \uc18d\uc131<\/td><td data-label=\"HTML\">class=&#8221;btn&#8221;<\/td><td data-label=\"JSX\">className=&#8221;btn&#8221; (class \ub294 JS \uc608\uc57d\uc5b4)<\/td><\/tr>\n<tr><td>for \uc18d\uc131 (label)<\/td><td data-label=\"HTML\">for=&#8221;email&#8221;<\/td><td data-label=\"JSX\">htmlFor=&#8221;email&#8221;<\/td><\/tr>\n<tr><td>style \uc18d\uc131<\/td><td data-label=\"HTML\">style=&#8221;color: red&#8221;<\/td><td data-label=\"JSX\">style=&#123;&#123; color: &#8216;red&#8217; &#125;&#125; (\uac1d\uccb4)<\/td><\/tr>\n<tr><td>\uc774\ubca4\ud2b8 \uc774\ub984<\/td><td data-label=\"HTML\">onclick=&#8221;&#8230;&#8221;<\/td><td data-label=\"JSX\">onClick=&#123;handler&#125; (camelCase + \ud568\uc218)<\/td><\/tr>\n<tr><td>\uc790\uae30 \ub2eb\uae30 \ud0dc\uadf8<\/td><td data-label=\"HTML\">&lt;br&gt; &lt;img&gt;<\/td><td data-label=\"JSX\">&lt;br \/&gt; &lt;img \/&gt; (XML \ucc98\ub7fc \/ \ud544\uc218)<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<div class=\"databox\">\n<strong>\uc65c \uc774\ub807\uac8c \uc5b4\uae0b\ub0ac\ub294\uac00<\/strong> \u2014 JSX \ub294 JavaScript \uc548\uc5d0 \ub4e4\uc5b4\uac00\ub294 \ubb38\ubc95\uc774\ub77c JS \uc608\uc57d\uc5b4(<code>class<\/code>\u00b7<code>for<\/code>) \uc640 \ucda9\ub3cc. style \uc740 \uac1d\uccb4\ub85c \ubc1b\uc544 \ub3d9\uc801 \uacc4\uc0b0 \uac00\ub2a5\ud558\uac8c. \uc774\ubca4\ud2b8 camelCase \ub294 DOM \uc758 onclick \uacfc \uad6c\ubd84\ud574 React \uc758 \ud569\uc131 \uc774\ubca4\ud2b8(SyntheticEvent) \uc2dc\uc2a4\ud15c\uc73c\ub85c \ub77c\uc6b0\ud305\ud558\uae30 \uc704\ud568.\n<\/div>\n\n<h2>2. \uc911\uad04\ud638 \ud45c\ud604\uc2dd \u2014 JSX \uc758 \uc9c4\uc9dc \ud798<\/h2>\n\n<p>JSX \uc548\uc5d0\uc11c <code>{...}<\/code> \uc911\uad04\ud638\ub85c <strong>JavaScript \ud45c\ud604\uc2dd<\/strong> \uc744 \ub07c\uc6b8 \uc218 \uc788\ub2e4. \ubcc0\uc218\u00b7\ud568\uc218 \ud638\ucd9c\u00b7\uc5f0\uc0b0 \ubaa8\ub450 \uac00\ub2a5.<\/p>\n\n<div class=\"code-block\">function Welcome() {\n  const name = &#8216;\ubc15\uc900\uc131&#8217;;\n  const hour = new Date().getHours();\n  const greeting = hour &lt; 12 ? &#8216;\uc88b\uc740 \uc544\uce68&#8217; : &#8216;\uc548\ub155&#8217;;\n\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;{greeting}, {name}\ub2d8!&lt;\/h1&gt;\n      &lt;p&gt;\ud604\uc7ac {hour}\uc2dc\uc785\ub2c8\ub2e4.&lt;\/p&gt;\n      &lt;p&gt;2 + 2 = {2 + 2}&lt;\/p&gt;\n    &lt;\/div&gt;\n  );\n}<\/div>\n\n<p>\uc911\uad04\ud638 \uc548\uc5d0\ub294 <strong>\ud45c\ud604\uc2dd<\/strong> \ub9cc. <code>if<\/code>\u00b7<code>for<\/code> \uac19\uc740 \ubb38(statement) \uc740 \ubabb \uc4f4\ub2e4. \ub300\uc2e0 \uc0bc\ud56d \uc5f0\uc0b0\uc790, <code>&&<\/code>, <code>.map()<\/code> \uc73c\ub85c \uac19\uc740 \ud6a8\uacfc (8\u00b79\ud3b8\uc5d0\uc11c \uc790\uc138\ud788).<\/p>\n\n<h3>\uc18d\uc131\uc5d0\ub3c4 \uc911\uad04\ud638<\/h3>\n\n<p>\ud0dc\uadf8 \uc18d\uc131\uc5d0 \ubcc0\uc218\u00b7\ud45c\ud604\uc2dd \ub123\uc744 \ub54c\ub3c4 \ub3d9\uc77c:<\/p>\n\n<div class=\"code-block\">const url = &#8216;https:\/\/junai.ai&#8217;;\nconst isActive = true;\n&lt;a href={url} className={isActive ? &#8216;active&#8217; : &#8221;}&gt;\ub9c1\ud06c&lt;\/a&gt;<\/div>\n\n<h2>3. Fragment \u2014 \uc5ec\ub7ec \uc694\uc18c\ub97c \ud55c \ubc88\uc5d0 \ubc18\ud658<\/h2>\n\n<p>JSX \uc758 \ud55c \uac00\uc9c0 \uc81c\uc57d \u2014 <strong>\ucef4\ud3ec\ub10c\ud2b8\ub294 \ub2e8\uc77c root \uc694\uc18c\ub9cc \ubc18\ud658<\/strong>. \uc5ec\ub7ec \ud615\uc81c \uc694\uc18c\ub97c \uadf8\ub0e5 \ub298\uc5b4\ub193\uc73c\uba74 \uc5d0\ub7ec.<\/p>\n\n<div class=\"code-block\">\/\/ \u274c \uc5d0\ub7ec\nfunction List() {\n  return (\n    &lt;li&gt;\uccab\ubc88\uc9f8&lt;\/li&gt;\n    &lt;li&gt;\ub450\ubc88\uc9f8&lt;\/li&gt;\n  );\n}<\/div>\n\n<p>\ud574\uacb0\ucc45\uc740 \ub450 \uac00\uc9c0. <code>&lt;div&gt;<\/code> \uac19\uc740 wrapper \ub85c \uac10\uc2f8\uac70\ub098 (\ubd88\ud544\uc694\ud55c DOM \ucd94\uac00), <strong>Fragment<\/strong> \uc0ac\uc6a9 (DOM \ucd94\uac00 \uc5c6\uc74c, \uad8c\uc7a5).<\/p>\n\n<div class=\"code-block\">\/\/ \u2705 Fragment \ub2e8\ucd95 \ubb38\ubc95\nfunction List() {\n  return (\n    &lt;&gt;\n      &lt;li&gt;\uccab\ubc88\uc9f8&lt;\/li&gt;\n      &lt;li&gt;\ub450\ubc88\uc9f8&lt;\/li&gt;\n    &lt;\/&gt;\n  );\n}\n\n\/\/ \ub610\ub294 \uba85\uc2dc\uc801\uc73c\ub85c\n&lt;React.Fragment&gt;&#8230;&lt;\/React.Fragment&gt;<\/div>\n\n<p>Fragment \uac00 \uc9c4\uac00\ub97c \ubc1c\ud718\ud558\ub294 \ucf00\uc774\uc2a4 \u2014 \ud14c\uc774\ube14 row \ucef4\ud3ec\ub10c\ud2b8, <code>&lt;dt&gt;<\/code> + <code>&lt;dd&gt;<\/code> \uc30d, \ubd80\ubaa8 \ub808\uc774\uc544\uc6c3\uc744 \uae68\uace0 \uc2f6\uc9c0 \uc54a\uc744 \ub54c. 9\ud3b8 \ub9ac\uc2a4\ud2b8 \ub80c\ub354\ub9c1\uc5d0\uc11c <code>key<\/code> \uac00 \ud544\uc694\ud55c \uacbd\uc6b0\ub294 \uba85\uc2dc\uc801 Fragment \ub9cc \uac00\ub2a5 (\ub2e8\ucd95 \ubb38\ubc95\uc740 key \uc548 \ubc1b\uc74c).<\/p>\n\n<h2>4. \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec \u2014 \ud568\uc218 \uc790\uccb4\ub97c \uc804\ub2ec<\/h2>\n\n<p>JSX \uc774\ubca4\ud2b8\uc758 \ud575\uc2ec \u2014 <strong>\ud568\uc218\ub97c \ud638\ucd9c\ud558\uc9c0 \ub9d0\uace0 \ud568\uc218 \uc790\uccb4\ub97c \uc804\ub2ec<\/strong>.<\/p>\n\n<div class=\"code-block\">function Button() {\n  const handleClick = () =&gt; {\n    alert(&#8216;\ud074\ub9ad\ub428!&#8217;);\n  };\n\n  return (\n    &lt;&gt;\n      &lt;button onClick={handleClick}&gt;\u2705 \uc815\ub2f5&lt;\/button&gt;\n      &lt;button onClick={handleClick()}&gt;\u274c \uc989\uc2dc \ud638\ucd9c\ub428 (\ub9c8\uc6b4\ud2b8 \uc2dc 1\ubc88)&lt;\/button&gt;\n      &lt;button onClick={() =&gt; alert(&#8216;\uc778\ub77c\uc778&#8217;)}&gt;\u2705 \ud654\uc0b4\ud45c \uc778\ub77c\uc778&lt;\/button&gt;\n    &lt;\/&gt;\n  );\n}<\/div>\n\n<p>\ub450 \ubc88\uc9f8 \ud328\ud134\uc774 \uac00\uc7a5 \ud754\ud55c \ucd08\ubcf4 \uc2e4\uc218. \uad04\ud638\ub97c \ubd99\uc774\uba74 \ub80c\ub354\ub9c1 \uc2dc\uc810\uc5d0 \ud568\uc218\uac00 \uc989\uc2dc \uc2e4\ud589\ub418\uace0 \uadf8 \ubc18\ud658\uac12(undefined)\uc774 \ud578\ub4e4\ub7ec\ub85c \ub4f1\ub85d\ub41c\ub2e4. <strong>\uad04\ud638 \uc5c6\ub294 \ud568\uc218 \ucc38\uc870<\/strong>\ub97c \uc804\ub2ec\ud574\uc57c \ud074\ub9ad \uc2dc\uc810\uc5d0 \ud638\ucd9c.<\/p>\n\n<div class=\"warnbox\">\n<strong>\uc778\uc790 \uc804\ub2ec \ud328\ud134<\/strong> \u2014 \ud578\ub4e4\ub7ec\uc5d0 \uc778\uc790\ub97c \ub118\uae30\uace0 \uc2f6\uc744 \ub54c\ub294 \uc778\ub77c\uc778 \ud654\uc0b4\ud45c\ub85c \uac10\uc2fc\ub2e4. <code>onClick=&#123;() =&gt; deleteItem(id)&#125;<\/code> \ud328\ud134. \uc9c1\uc811 <code>onClick=&#123;deleteItem(id)&#125;<\/code> \ud558\uba74 \uc704\uc640 \uac19\uc740 \uc989\uc2dc \ud638\ucd9c \ubc84\uadf8.\n<\/div>\n\n<p>4\ud3b8 \ub05d \u2014 JSX \uc758 \ubaa8\ub4e0 \uae30\ubcf8\uae30 \uc815\ub9ac \uc644\ub8cc. 5\ud3b8\uc5d0\uc11c\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc774 \ub370\uc774\ud130 \uc804\ub2ec (props) \uc73c\ub85c \ub4e4\uc5b4\uac04\ub2e4. \ud568\uc218 \uc778\uc790\uc640 \ub611\uac19\uc740 \uac1c\ub150\uc774 JSX \uc18d\uc131\uc73c\ub85c \ud45c\ud604\ub41c\ub2e4.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00<\/h3>\n<p>React \uad50\uc7ac 5\ud3b8 \u2014 Props \ub85c \ubd80\ubaa8\u2192\uc790\uc2dd \ub370\uc774\ud130 \uc804\ub2ec. \uad6c\uc870\ubd84\ud574 \ud328\ud134, children prop, TypeScript \ud0c0\uc785\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-vite-setup-2\/\">2\ud3b8 Vite<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-first-component-3\/\">3\ud3b8 \uccab \ucef4\ud3ec\ub10c\ud2b8<\/a> \u00b7\n<strong>4\ud3b8 JSX \ubb38\ubc95<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>JSX \uc640 HTML \uc758 \ucc28\uc774 5\uac00\uc9c0 + \uc911\uad04\ud638 \ud45c\ud604\uc2dd + Fragment + \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec. \uad50\uc7ac 4\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":741,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-768","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\/768","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=768"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/768\/revisions"}],"predecessor-version":[{"id":793,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/768\/revisions\/793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/741"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}