{"id":65,"date":"2026-06-26T13:32:24","date_gmt":"2026-06-26T13:32:24","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=65"},"modified":"2026-06-26T14:02:47","modified_gmt":"2026-06-26T14:02:47","slug":"jsx-%eb%ac%b8%eb%b2%95%ea%b3%bc-%ec%bb%b4%ed%8f%ac%eb%84%8c%ed%8a%b8","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=65","title":{"rendered":"JSX \ubb38\ubc95\uacfc \ucef4\ud3ec\ub10c\ud2b8"},"content":{"rendered":"<h1>1. JSX \ubb38\ubc95\uacfc \ucef4\ud3ec\ub10c\ud2b8<\/h1>\n<p>React\uc758 \ud575\uc2ec\uc778 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4dc\ub294 \ubc95\uacfc, \uc774\ub97c \uc704\ud574 \uc0ac\uc6a9\ud558\ub294 JSX \ubb38\ubc95\uc744 \uc644\ubcbd\ud788 \uc775\ud78c\ub2e4.<\/p>\n<h2>1.1. \ucef4\ud3ec\ub10c\ud2b8\uc640 JSX\uc758 \uad00\uacc4<\/h2>\n<h3>1.1.1. \ucef4\ud3ec\ub10c\ud2b8\ub780?<\/h3>\n<p><strong>\ucef4\ud3ec\ub10c\ud2b8(Component)<\/strong>\ub294 React\uc5d0\uc11c UI\ub97c \ub9cc\ub4dc\ub294 \uae30\ubcf8 \ub2e8\uc704\ub2e4. \ub808\uace0 \ube14\ub85d\ucc98\ub7fc \uc791\uc740 \ubd80\ud488\ub4e4\uc744 \uc870\ub9bd\ud574\uc11c \uc804\uccb4 \ud654\uba74\uc744 \ub9cc\ub4e0\ub2e4\uace0 \uc0dd\uac01\ud558\uba74 \ub41c\ub2e4.<\/p>\n<ul>\n<li><strong>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud568\uc218:<\/strong> React \ucef4\ud3ec\ub10c\ud2b8\ub294 \uadf8\ub0e5 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud568\uc218\ub2e4<\/li>\n<li><strong>UI \ubc18\ud658:<\/strong> \uc774 \ud568\uc218\ub294 \ud654\uba74\uc5d0 \uadf8\ub9b4 \ub0b4\uc6a9\uc744 \ubc18\ud658\ud55c\ub2e4<\/li>\n<li><strong>\uc7ac\uc0ac\uc6a9 \uac00\ub2a5:<\/strong> \ud55c \ubc88 \ub9cc\ub4e4\uba74 \uc5ec\ub7ec \uacf3\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4<\/li>\n<\/ul>\n<h3>1.1.2. JSX\ub780?<\/h3>\n<p><strong>JSX(JavaScript XML)<\/strong>\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc548\uc5d0\uc11c HTML\ucc98\ub7fc \uc0dd\uae34 \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \ubb38\ubc95\uc774\ub2e4.<\/p>\n<ul>\n<li><strong>HTML + JavaScript:<\/strong> HTML \uad6c\uc870 \uc548\uc5d0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub97c \ub123\uc744 \uc218 \uc788\ub2e4<\/li>\n<li><strong>\ubcc0\ud658 \ud544\uc694:<\/strong> \ube0c\ub77c\uc6b0\uc800\ub294 JSX\ub97c \uc774\ud574 \ubabb\ud568 \u2192 Vite(Babel)\uac00 \uc77c\ubc18 JS\ub85c \ubcc0\ud658<\/li>\n<li><strong>\ubb38\ubc95 \uc124\ud0d5:<\/strong> \uc2e4\uc81c\ub85c\ub294 <code>React.createElement()<\/code> \ud568\uc218 \ud638\ucd9c\ub85c \ubcc0\ud658\ub428<\/li>\n<\/ul>\n<h3>1.1.3. \ub458\uc758 \uad00\uacc4<\/h3>\n<blockquote>\n<p><strong>Tip<\/strong>: <strong>\ud575\uc2ec \uac1c\ub150:<\/strong><\/p>\n<p>\ucef4\ud3ec\ub10c\ud2b8\ub294 <strong>&quot;\ubb34\uc5c7&quot;<\/strong>\uc774\uace0, JSX\ub294 <strong>&quot;\uc5b4\ub5bb\uac8c&quot;<\/strong>\ub2e4.<\/p>\n<p>\u2022 <strong>\ucef4\ud3ec\ub10c\ud2b8:<\/strong> UI\ub97c \ub9cc\ub4dc\ub294 \ud568\uc218 (\uc124\uacc4\ub3c4)<br \/>\n\u2022 <strong>JSX:<\/strong> \ucef4\ud3ec\ub10c\ud2b8 \uc548\uc5d0\uc11c UI\ub97c \ud45c\ud604\ud558\ub294 \ubb38\ubc95 (\uc7ac\ub8cc\uc640 \uc870\ub9bd\ubc95)<\/p>\n<p>\ucef4\ud3ec\ub10c\ud2b8\ub294 JSX\ub97c \ubc18\ud658(return)\ud568\uc73c\ub85c\uc368 \ud654\uba74\uc5d0 \ubb34\uc5c7\uc744 \uadf8\ub9b4\uc9c0 \uc815\uc758\ud55c\ub2e4.<\/p>\n<\/blockquote>\n<pre><code class=\"language-jsx\">\/\/ \ucef4\ud3ec\ub10c\ud2b8: Greeting\uc774\ub77c\ub294 \ud568\uc218\nfunction Greeting() {\n  \/\/ JSX: \uc774 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uadf8\ub9b4 UI\ub97c JSX \ubb38\ubc95\uc73c\ub85c \uc791\uc131\n  return &lt;h1&gt;\uc548\ub155\ud558\uc138\uc694!&lt;\/h1&gt;;\n}\n\n\/\/ \uc704 JSX\ub294 \uc2e4\uc81c\ub85c \uc774\ub807\uac8c \ubcc0\ud658\ub428\nfunction Greeting() {\n  return React.createElement(&#39;h1&#39;, null, &#39;\uc548\ub155\ud558\uc138\uc694!&#39;);\n}\n<\/code><\/pre>\n<h2>1.2. \ucef4\ud3ec\ub10c\ud2b8 \uc644\uc804 \uc815\ubcf5<\/h2>\n<h3>1.2.1. \ucef4\ud3ec\ub10c\ud2b8\uc758 \uae30\ubcf8 \uad6c\uc870<\/h3>\n<p>React \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uae30\ubcf8\uc73c\ub85c \uc0ac\uc6a9\ud55c\ub2e4. (\uacfc\uac70\uc5d0\ub294 \ud074\ub798\uc2a4\ud615\ub3c4 \uc788\uc5c8\uc9c0\ub9cc \uc9c0\uae08\uc740 \uac70\uc758 \uc0ac\uc6a9 \uc548 \ud568)<\/p>\n<pre><code class=\"language-jsx\">\/\/ \uac00\uc7a5 \uac04\ub2e8\ud55c \ucef4\ud3ec\ub10c\ud2b8\nfunction Hello() {\n  return &lt;div&gt;\uc548\ub155!&lt;\/div&gt;;\n}\n\n\/\/ \ud654\uc0b4\ud45c \ud568\uc218\ub85c\ub3c4 \uc791\uc131 \uac00\ub2a5\nconst Hello = () =&gt; {\n  return &lt;div&gt;\uc548\ub155!&lt;\/div&gt;;\n};\n\n\/\/ return\uc774 \ud55c \uc904\uc774\uba74 \uad04\ud638 \uc0dd\ub7b5 \uac00\ub2a5\nconst Hello = () =&gt; &lt;div&gt;\uc548\ub155!&lt;\/div&gt;;\n<\/code><\/pre>\n<h3>1.2.2. \ucef4\ud3ec\ub10c\ud2b8 \uc791\uc131 \uaddc\uce59 (\ub9e4\uc6b0 \uc911\uc694!)<\/h3>\n<blockquote>\n<p><strong>Tip<\/strong>: <strong>\uaddc\uce59 1: \ub300\ubb38\uc790\ub85c \uc2dc\uc791<\/strong><\/p>\n<p>\ucef4\ud3ec\ub10c\ud2b8 \uc774\ub984\uc740 <strong>\ubc18\ub4dc\uc2dc \ub300\ubb38\uc790<\/strong>\ub85c \uc2dc\uc791\ud574\uc57c \ud55c\ub2e4.<\/p>\n<p>\uc62c\ubc14\ub978 \uc608: <code>Header<\/code>, <code>MyButton<\/code>, <code>UserProfile<\/code><br \/>\n\uc798\ubabb\ub41c \uc608: <code>header<\/code>, <code>myButton<\/code>, <code>userProfile<\/code><\/p>\n<p><strong>\uc774\uc720:<\/strong> React\ub294 \uc18c\ubb38\uc790\ub85c \uc2dc\uc791\ud558\uba74 \uc77c\ubc18 HTML \ud0dc\uadf8\ub85c \uc778\uc2dd\ud55c\ub2e4.<br \/>\n<code>&lt;div&gt;<\/code>\ub294 HTML div \ud0dc\uadf8, <code>&lt;Div&gt;<\/code>\ub294 Div \ucef4\ud3ec\ub10c\ud2b8<\/p>\n<\/blockquote>\n<blockquote>\n<p><strong>Tip<\/strong>: <strong>\uaddc\uce59 2: JSX \ubc18\ud658<\/strong><\/p>\n<p>\ud568\uc218\ub294 \ubc18\ub4dc\uc2dc JSX\ub97c <code>return<\/code>\ud574\uc57c \ud55c\ub2e4. \uc544\ubb34\uac83\ub3c4 \ubc18\ud658\ud558\uc9c0 \uc54a\uc73c\uba74 \uc624\ub958 \ubc1c\uc0dd.<\/p>\n<pre><code class=\"language-jsx\">\n<\/code><\/pre>\n<\/blockquote>\n<p>\/\/ \uc62c\ubc14\ub978 \uc608<br \/>\nfunction Button() {<br \/>\n  return <button>\ud074\ub9ad<\/button>;<br \/>\n}<\/p>\n<p>\/\/ \uc624\ub958 \ubc1c\uc0dd &#8211; \uc544\ubb34\uac83\ub3c4 \ubc18\ud658 \uc548 \ud568<br \/>\nfunction Button() {<br \/>\n  console.log(&quot;\ubc84\ud2bc&quot;);<br \/>\n}<\/p>\n<pre><code>\n&gt; **Tip**: **\uaddc\uce59 3: \ud30c\uc77c\ub2f9 \ud558\ub098\uc758 \uae30\ubcf8 \ub0b4\ubcf4\ub0b4\uae30**\n&gt; \n&gt; \ub2e4\ub978 \ud30c\uc77c\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub824\uba74 `export default`\ub85c \ub0b4\ubcf4\ub0b4\uc57c \ud55c\ub2e4.\n&gt; \n&gt; ```jsx\n\/\/ Button.jsx\nfunction Button() {\n  return &lt;button&gt;\ud074\ub9ad&lt;\/button&gt;;\n}\n\nexport default Button; \/\/ \ub2e4\ub978 \ud30c\uc77c\uc5d0\uc11c import \uac00\ub2a5\n\n\/\/ \ub610\ub294 \ud55c \uc904\ub85c\nexport default function Button() {\n  return &lt;button&gt;\ud074\ub9ad&lt;\/button&gt;;\n}\n<\/code><\/pre>\n<h3>1.2.3. \ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc6a9\ud558\uae30<\/h3>\n<p>\ub9cc\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\ub294 HTML \ud0dc\uadf8\ucc98\ub7fc \uc0ac\uc6a9\ud55c\ub2e4. \uc774\ub97c <strong>&quot;\ucef4\ud3ec\ub10c\ud2b8 \ub80c\ub354\ub9c1&quot;<\/strong>\uc774\ub77c\uace0 \ud55c\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">\/\/ Button \ucef4\ud3ec\ub10c\ud2b8 \uc815\uc758\nfunction Button() {\n  return &lt;button&gt;\ud074\ub9ad\ud558\uc138\uc694&lt;\/button&gt;;\n}\n\n\/\/ App \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c Button \uc0ac\uc6a9\nfunction App() {\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;\ub0b4 \uc571&lt;\/h1&gt;\n      &lt;Button \/&gt;  {\/* Button \ucef4\ud3ec\ub10c\ud2b8\ub97c HTML \ud0dc\uadf8\ucc98\ub7fc \uc0ac\uc6a9 *\/}\n      &lt;Button \/&gt;  {\/* \uc5ec\ub7ec \ubc88 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5 *\/}\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<h3>1.2.4. \ucef4\ud3ec\ub10c\ud2b8 \uc548\uc5d0\uc11c \ub85c\uc9c1 \uc791\uc131\ud558\uae30<\/h3>\n<p>\ucef4\ud3ec\ub10c\ud2b8\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud568\uc218\uc774\ubbc0\ub85c, return \uc804\uc5d0 \uc77c\ubc18 JS \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">function Greeting() {\n  \/\/ return \uc804\uc5d0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub85c\uc9c1 \uc791\uc131\n  const name = &quot;\ucca0\uc218&quot;;\n  const hour = new Date().getHours();\n  const greeting = hour &lt; 12 ? &quot;\uc88b\uc740 \uc544\uce68&quot; : &quot;\uc548\ub155\ud558\uc138\uc694&quot;;\n\n  \/\/ JSX\uc5d0\uc11c \ubcc0\uc218 \uc0ac\uc6a9\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;{greeting}, {name}\ub2d8!&lt;\/h1&gt;\n      &lt;p&gt;\ud604\uc7ac \uc2dc\uac01\uc740 {hour}\uc2dc\uc785\ub2c8\ub2e4.&lt;\/p&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<blockquote>\n<p><strong>Tip<\/strong>: <strong>[\uc2e4\uc2b5 1] \uc790\uae30\uc18c\uac1c \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/strong><\/p>\n<p><code>src\/Profile.jsx<\/code> \ud30c\uc77c\uc744 \ub9cc\ub4e4\uace0 \ub2e4\uc74c \ub0b4\uc6a9\uc744 \uc791\uc131:<\/p>\n<pre><code class=\"language-jsx\">\n<\/code><\/pre>\n<\/blockquote>\n<p>function Profile() {<br \/>\n  const name = &quot;\ud64d\uae38\ub3d9&quot;;<br \/>\n  const age = 25;<br \/>\n  const hobby = &quot;\ub3c5\uc11c&quot;;<\/p>\n<p>  return (<br \/>\n    &lt;div style={{ padding: &#39;20px&#39;, border: &#39;1px solid #ccc&#39; }}&gt;<\/p>\n<h2>{name}\uc758 \ud504\ub85c\ud544<\/h2>\n<p>\ub098\uc774: {age}\uc138<\/p>\n<p>\ucde8\ubbf8: {hobby}<\/p>\n<\/p><\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default Profile;<\/p>\n<pre><code>&gt; \n&gt; \uadf8\ub9ac\uace0 `App.jsx`\uc5d0\uc11c \ubd88\ub7ec\uc640\uc11c \uc0ac\uc6a9:\n&gt; ```jsx\nimport Profile from &#39;.\/Profile&#39;;\n\nfunction App() {\n  return &lt;Profile \/&gt;;\n}\n<\/code><\/pre>\n<h2>1.3. JSX \ubb38\ubc95 \uc644\uc804 \uc815\ubcf5<\/h2>\n<p>JSX\ub294 HTML\ucc98\ub7fc \ubcf4\uc774\uc9c0\ub9cc \uc2e4\uc81c\ub85c\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub2e4. \uadf8\ub798\uc11c HTML\uacfc\ub294 \ub2e4\ub978 \uaddc\uce59\ub4e4\uc774 \uc788\ub2e4.<\/p>\n<h3>1.3.1. JSX\uc758 \ubcf8\uc9c8<\/h3>\n<pre><code class=\"language-jsx\">\/\/ \uc6b0\ub9ac\uac00 \uc791\uc131\ud558\ub294 JSX\nconst element = &lt;h1 className=&quot;title&quot;&gt;\uc548\ub155!&lt;\/h1&gt;;\n\n\/\/ Vite(Babel)\uac00 \ubcc0\ud658\ud55c \uc2e4\uc81c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\nconst element = React.createElement(\n  &#39;h1&#39;,\n  { className: &#39;title&#39; },\n  &#39;\uc548\ub155!&#39;\n);\n<\/code><\/pre>\n<p>JSX\ub294 \uacb0\uad6d <code>React.createElement()<\/code> \ud568\uc218\ub97c \uc27d\uac8c \uc4f0\uae30 \uc704\ud55c <strong>\ubb38\ubc95 \uc124\ud0d5(Syntactic Sugar)<\/strong>\uc774\ub2e4.<\/p>\n<h3>1.3.2. JSX \uaddc\uce59 1: \ud558\ub098\uc758 \ucd5c\uc0c1\uc704 \ud0dc\uadf8<\/h3>\n<p>\ucef4\ud3ec\ub10c\ud2b8\ub294 <strong>\ubc18\ub4dc\uc2dc \ud558\ub098\uc758 \ub369\uc5b4\ub9ac<\/strong>\ub9cc \ubc18\ud658\ud574\uc57c \ud55c\ub2e4. \ud615\uc81c \ud0dc\uadf8\ub97c \ub098\ub780\ud788 \ub458 \uc218 \uc5c6\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">\/\/ \uc624\ub958 \ubc1c\uc0dd! - \ub450 \uac1c\uc758 \ud615\uc81c \ud0dc\uadf8\nfunction App() {\n  return (\n    &lt;h1&gt;\uc81c\ubaa9&lt;\/h1&gt;\n    &lt;p&gt;\ub0b4\uc6a9&lt;\/p&gt;\n  );\n}\n\n\/\/ \ud574\uacb0\ucc45 1: div\ub85c \uac10\uc2f8\uae30\nfunction App() {\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;\uc81c\ubaa9&lt;\/h1&gt;\n      &lt;p&gt;\ub0b4\uc6a9&lt;\/p&gt;\n    &lt;\/div&gt;\n  );\n}\n\n\/\/ \ud574\uacb0\ucc45 2: Fragment \uc0ac\uc6a9 (\uad8c\uc7a5)\nfunction App() {\n  return (\n    &lt;&gt;  {\/* Fragment: \ud654\uba74\uc5d0 \ub80c\ub354\ub9c1\ub418\uc9c0 \uc54a\ub294 \ud22c\uba85\ud55c \ud0dc\uadf8 *\/}\n      &lt;h1&gt;\uc81c\ubaa9&lt;\/h1&gt;\n      &lt;p&gt;\ub0b4\uc6a9&lt;\/p&gt;\n    &lt;\/&gt;\n  );\n}\n<\/code><\/pre>\n<blockquote>\n<p><strong>Tip<\/strong>: <strong>Fragment\ub97c \uc4f0\ub294 \uc774\uc720:<\/strong><\/p>\n<p>\ubd88\ud544\uc694\ud55c <code>&lt;div&gt;<\/code>\uac00 \ub9ce\uc544\uc9c0\uba74 HTML \uad6c\uc870\uac00 \ubcf5\uc7a1\ud574\uc9c0\uace0 CSS \uc2a4\ud0c0\uc77c\ub9c1\uc774 \uc5b4\ub824\uc6cc\uc9c4\ub2e4.<br \/>\nFragment(<code>&lt;&gt;&lt;\/&gt;<\/code>)\ub294 \uc2e4\uc81c DOM\uc5d0 \ub80c\ub354\ub9c1\ub418\uc9c0 \uc54a\uc73c\ubbc0\ub85c \uae54\ub054\ud55c HTML \uad6c\uc870\ub97c \uc720\uc9c0\ud560 \uc218 \uc788\ub2e4.<\/p>\n<\/blockquote>\n<h3>1.3.3. JSX \uaddc\uce59 2: \ubaa8\ub4e0 \ud0dc\uadf8\ub294 \ub2eb\uc544\uc57c \ud568<\/h3>\n<p>HTML\uc5d0\uc11c\ub294 \uc77c\ubd80 \ud0dc\uadf8\ub97c \ub2eb\uc9c0 \uc54a\uc544\ub3c4 \ub410\uc9c0\ub9cc, JSX\uc5d0\uc11c\ub294 <strong>\ubaa8\ub4e0 \ud0dc\uadf8\ub97c \ubc18\ub4dc\uc2dc \ub2eb\uc544\uc57c<\/strong> \ud55c\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">\/\/ HTML\uc5d0\uc11c\ub294 OK, JSX\uc5d0\uc11c\ub294 \uc624\ub958\n&lt;input type=&quot;text&quot;&gt;\n&lt;br&gt;\n&lt;img src=&quot;image.jpg&quot;&gt;\n\n\/\/ JSX\uc5d0\uc11c\ub294 \uc774\ub807\uac8c \ub2eb\uc544\uc57c \ud568 (Self-closing tag)\n&lt;input type=&quot;text&quot; \/&gt;\n&lt;br \/&gt;\n&lt;img src=&quot;image.jpg&quot; \/&gt;\n&lt;hr \/&gt;\n<\/code><\/pre>\n<h3>1.3.4. JSX \uaddc\uce59 3: \uc911\uad04\ud638\ub85c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud45c\ud604\uc2dd \uc0bd\uc785<\/h3>\n<p>\uc911\uad04\ud638 <code>{}<\/code> \uc548\uc5d0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 <strong>\ud45c\ud604\uc2dd(expression)<\/strong>\uc744 \ub123\uc744 \uc218 \uc788\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">function Welcome() {\n  const name = &quot;\ucca0\uc218&quot;;\n  const age = 20;\n  const isAdult = age &gt;= 18;\n\n  return (\n    &lt;div&gt;\n      {\/* \ubcc0\uc218 *\/}\n      &lt;h1&gt;\uc548\ub155, {name}!&lt;\/h1&gt;\n\n      {\/* \uacc4\uc0b0\uc2dd *\/}\n      &lt;p&gt;10\ub144 \ud6c4 \ub098\uc774: {age + 10}&lt;\/p&gt;\n\n      {\/* \uc0bc\ud56d \uc5f0\uc0b0\uc790 *\/}\n      &lt;p&gt;{isAdult ? &quot;\uc131\uc778&quot; : &quot;\ubbf8\uc131\ub144\uc790&quot;}&lt;\/p&gt;\n\n      {\/* \ud568\uc218 \ud638\ucd9c *\/}\n      &lt;p&gt;\ub300\ubb38\uc790 \uc774\ub984: {name.toUpperCase()}&lt;\/p&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<blockquote>\n<p><strong>Tip<\/strong>: <strong>\uc911\uc694: \ud45c\ud604\uc2dd\ub9cc \uac00\ub2a5!<\/strong><\/p>\n<p>\uc911\uad04\ud638 \uc548\uc5d0\ub294 <strong>\uac12\uc744 \ubc18\ud658\ud558\ub294 \ud45c\ud604\uc2dd<\/strong>\ub9cc \ub123\uc744 \uc218 \uc788\ub2e4.<\/p>\n<p>\uc62c\ubc14\ub978 \uc608: \ubcc0\uc218, \uacc4\uc0b0\uc2dd, \uc0bc\ud56d \uc5f0\uc0b0\uc790, \ud568\uc218 \ud638\ucd9c<br \/>\n\uc798\ubabb\ub41c \uc608: <code>if<\/code>\ubb38, <code>for<\/code>\ubb38, <code>switch<\/code>\ubb38 \ub4f1\uc758 \ubb38\uc7a5(statement)<\/p>\n<pre><code class=\"language-jsx\">\n<\/code><\/pre>\n<\/blockquote>\n<p>\/\/ \uc624\ub958! &#8211; if\ub294 \ud45c\ud604\uc2dd\uc774 \uc544\ub2d8<br \/>\nreturn <\/p>\n<div>{if (true) { &quot;\ucc38&quot; }}<\/div>\n<p>;<\/p>\n<p>\/\/ \ub300\uc2e0 \uc0bc\ud56d \uc5f0\uc0b0\uc790 \uc0ac\uc6a9<br \/>\nreturn <\/p>\n<div>{true ? &quot;\ucc38&quot; : &quot;\uac70\uc9d3&quot;}<\/div>\n<p>;<\/p>\n<pre><code>\n### 1.3.5. JSX \uaddc\uce59 4: \uc18d\uc131\uba85 \uc8fc\uc758\uc0ac\ud56d\n\nJSX\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc774\ubbc0\ub85c, HTML \uc18d\uc131\uba85\uc774 \uc57d\uac04 \ub2e4\ub974\ub2e4.\n\n| HTML | JSX | \uc774\uc720 |\n| :--- | :--- | :--- |\n| `class` | `className` | class\ub294 JS \uc608\uc57d\uc5b4 |\n| `for` | `htmlFor` | for\ub294 JS \uc608\uc57d\uc5b4 |\n| `onclick` | `onClick` | \uce74\uba5c\ucf00\uc774\uc2a4 \uc0ac\uc6a9 |\n| `tabindex` | `tabIndex` | \uce74\uba5c\ucf00\uc774\uc2a4 \uc0ac\uc6a9 |\n\n```jsx\n\/\/ JSX \ubc29\uc2dd\n&lt;div className=&quot;container&quot;&gt;\n  &lt;label htmlFor=&quot;name&quot;&gt;\uc774\ub984&lt;\/label&gt;\n  &lt;button onClick={handleClick}&gt;\ud074\ub9ad&lt;\/button&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<h3>1.3.6. JSX \uaddc\uce59 5: \uc778\ub77c\uc778 \uc2a4\ud0c0\uc77c\uc740 \uac1d\uccb4\ub85c<\/h3>\n<p>HTML\uc5d0\uc11c\ub294 \ubb38\uc790\uc5f4\ub85c \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud588\uc9c0\ub9cc, JSX\uc5d0\uc11c\ub294 <strong>\uac1d\uccb4<\/strong>\ub85c \uc9c0\uc815\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">\/\/ JSX \ubc29\uc2dd (\uac1d\uccb4 \uc0ac\uc6a9, \uc18d\uc131\uba85\uc740 \uce74\uba5c\ucf00\uc774\uc2a4)\n&lt;div style={{ color: &#39;red&#39;, fontSize: &#39;20px&#39; }}&gt;\ud14d\uc2a4\ud2b8&lt;\/div&gt;\n\/\/           \u2191 \uccab \ubc88\uc9f8 \uc911\uad04\ud638: JS \ud45c\ud604\uc2dd\n\/\/            \u2191 \ub450 \ubc88\uc9f8 \uc911\uad04\ud638: \uac1d\uccb4 \ub9ac\ud130\ub7f4\n\n\/\/ \ubcc0\uc218\ub85c \ubd84\ub9ac\ud558\uba74 \ub354 \uae54\ub054\nconst myStyle = {\n  color: &#39;red&#39;,\n  fontSize: &#39;20px&#39;,\n  backgroundColor: &#39;#f0f0f0&#39;  \/\/ background-color \u2192 backgroundColor\n};\n\nreturn &lt;div style={myStyle}&gt;\ud14d\uc2a4\ud2b8&lt;\/div&gt;;\n<\/code><\/pre>\n<h3>1.3.7. JSX \uaddc\uce59 6: \uc8fc\uc11d \uc791\uc131\ubc95<\/h3>\n<pre><code class=\"language-jsx\">function App() {\n  return (\n    &lt;div&gt;\n      {\/* JSX \uc548\uc5d0\uc11c \uc8fc\uc11d: \uc911\uad04\ud638 \uc548\uc5d0 \/*  *\/ \uc0ac\uc6a9 *\/}\n      &lt;h1&gt;\uc81c\ubaa9&lt;\/h1&gt;\n\n      {\/*\n        \uc5ec\ub7ec \uc904 \uc8fc\uc11d\ub3c4 \uac00\ub2a5\n        \uc774\ub807\uac8c \uc791\uc131\ud569\ub2c8\ub2e4\n      *\/}\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<blockquote>\n<p><strong>Tip<\/strong>: <strong>[\uc2e4\uc2b5 2] JSX \ubb38\ubc95 \uc5f0\uc2b5<\/strong><\/p>\n<p><code>src\/Card.jsx<\/code> \ud30c\uc77c\uc744 \ub9cc\ub4e4\uace0 JSX \ubb38\ubc95\uc744 \uc5f0\uc2b5\ud574\ubcf4\uc790:<\/p>\n<pre><code class=\"language-jsx\">\n<\/code><\/pre>\n<\/blockquote>\n<p>function Card() {<br \/>\n  const title = &quot;React \ud559\uc2b5&quot;;<br \/>\n  const progress = 75;<br \/>\n  const completed = progress &gt;= 100;<\/p>\n<p>  const cardStyle = {<br \/>\n    border: &#39;2px solid #007bff&#39;,<br \/>\n    borderRadius: &#39;10px&#39;,<br \/>\n    padding: &#39;20px&#39;,<br \/>\n    margin: &#39;10px&#39;,<br \/>\n    backgroundColor: completed ? &#39;#d4edda&#39; : &#39;#fff3cd&#39;<br \/>\n  };<\/p>\n<p>  return (<br \/>\n    &lt;&gt;<\/p>\n<div style={cardStyle}>\n<h2 className=\"card-title\">{title}<\/h2>\n<p>\uc9c4\ud589\ub960: {progress}%<\/p>\n<\/p>\n<pre><code>    {\/* \uc9c4\ud589 \ubc14 *\/}\n    &lt;div style={{\n      width: &#39;100%&#39;,\n      height: &#39;20px&#39;,\n      backgroundColor: &#39;#e0e0e0&#39;,\n      borderRadius: &#39;10px&#39;\n    }}&gt;\n      &lt;div style={{\n        width: `${progress}%`,\n        height: &#39;100%&#39;,\n        backgroundColor: &#39;#007bff&#39;,\n        borderRadius: &#39;10px&#39;\n      }} \/&gt;\n    &lt;\/div&gt;\n\n    {\/* \uc870\uac74\ubd80 \ub80c\ub354\ub9c1 *\/}\n    &lt;p&gt;{completed ? &quot;\u2705 \uc644\ub8cc!&quot; : &quot;\ud83d\udd04 \uc9c4\ud589 \uc911&quot;}&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/&gt;\n<\/code><\/pre>\n<p>  );<br \/>\n}<\/p>\n<p>export default Card;<\/p>\n<pre><code>\n## 1.4. \ucef4\ud3ec\ub10c\ud2b8 \ubd84\ub9ac \uc2e4\uc2b5\n\n\ud558\ub098\uc758 \ud30c\uc77c(App.jsx)\uc5d0 \ubaa8\ub4e0 \ucf54\ub4dc\ub97c \ub123\ub294 \uac83\uc740 \uc88b\uc9c0 \uc54a\ub2e4. \uc5ed\ud560\ubcc4\ub85c \ud30c\uc77c\uc744 \ub098\ub204\uba74 \ucf54\ub4dc \uad00\ub9ac\uac00 \uc26c\uc6cc\uc9c4\ub2e4.\n\n- **\uc7ac\uc0ac\uc6a9\uc131:** \ud55c \ubc88 \ub9cc\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc5ec\ub7ec \uacf3\uc5d0\uc11c \uc0ac\uc6a9\n- **\uc720\uc9c0\ubcf4\uc218:** \ubb38\uc81c\uac00 \uc0dd\uae30\uba74 \ud574\ub2f9 \ucef4\ud3ec\ub10c\ud2b8 \ud30c\uc77c\ub9cc \uc218\uc815\n- **\ud611\uc5c5:** \ud300\uc6d0\ub4e4\uc774 \uac01\uc790 \ub2e4\ub978 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc791\uc5c5 \uac00\ub2a5\n- **\ud14c\uc2a4\ud2b8:** \uac1c\ubcc4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub3c5\ub9bd\uc801\uc73c\ub85c \ud14c\uc2a4\ud2b8 \uac00\ub2a5\n\n&gt; **Tip**: **\uc5b8\uc81c \ubd84\ub9ac\ud574\uc57c \ud560\uae4c?**\n&gt; \n&gt; 1. **\uc7ac\uc0ac\uc6a9\ub420 \uac83 \uac19\uc740 UI:** \ubc84\ud2bc, \uce74\ub4dc, \uc785\ub825 \ud3fc \ub4f1\n&gt; 2. **\ub3c5\ub9bd\uc801\uc778 \uae30\ub2a5:** \ub85c\uadf8\uc778 \ud3fc, \uac80\uc0c9 \ubc14, \uc7a5\ubc14\uad6c\ub2c8 \ub4f1\n&gt; 3. **\ub108\ubb34 \uae38\uc5b4\uc9c4 \ucef4\ud3ec\ub10c\ud2b8:** 100\uc904 \uc774\uc0c1\uc774\uba74 \ubd84\ub9ac \uace0\ub824\n&gt; 4. **\uba85\ud655\ud55c \ucc45\uc784\uc774 \uc788\ub294 UI:** \ud5e4\ub354, \ud478\ud130, \uc0ac\uc774\ub4dc\ubc14 \ub4f1\n\n&gt; **Tip**: **[\uc2e4\uc2b5 3] \ucef4\ud3ec\ub10c\ud2b8 \ubd84\ub9ac\ud558\uae30**\n&gt; \n&gt; **1\ub2e8\uacc4: \ucef4\ud3ec\ub10c\ud2b8 \ud30c\uc77c \uc0dd\uc131**\n&gt; \n&gt; **src\/Header.jsx**\n&gt; ```jsx\nfunction Header() {\n  return (\n    &lt;header style={{\n      backgroundColor: &#39;#282c34&#39;,\n      padding: &#39;20px&#39;,\n      color: &#39;white&#39;\n    }}&gt;\n      &lt;h1&gt;\ub0b4 \uc6f9\uc0ac\uc774\ud2b8&lt;\/h1&gt;\n      &lt;nav&gt;\n        &lt;a href=&quot;#home&quot; style={{ color: &#39;white&#39;, margin: &#39;0 10px&#39; }}&gt;\ud648&lt;\/a&gt;\n        &lt;a href=&quot;#about&quot; style={{ color: &#39;white&#39;, margin: &#39;0 10px&#39; }}&gt;\uc18c\uac1c&lt;\/a&gt;\n        &lt;a href=&quot;#contact&quot; style={{ color: &#39;white&#39;, margin: &#39;0 10px&#39; }}&gt;\uc5f0\ub77d&lt;\/a&gt;\n      &lt;\/nav&gt;\n    &lt;\/header&gt;\n  );\n}\n\nexport default Header;\n<\/code><\/pre>\n<blockquote>\n<p><strong>src\/MainContent.jsx<\/strong><br \/>\n&#8220;`jsx<br \/>\nfunction MainContent() {<br \/>\n  return (<br \/>\n    &lt;main style={{<br \/>\n      padding: &#39;40px&#39;,<br \/>\n      minHeight: &#39;500px&#39;<br \/>\n    }}&gt;<\/p>\n<h2>\uba54\uc778 \ucf58\ud150\uce20<\/h2>\n<p>\uc5ec\uae30\uc5d0 \uc8fc\uc694 \ub0b4\uc6a9\uc774 \ub4e4\uc5b4\uac11\ub2c8\ub2e4.<\/p>\n<\/p>\n<\/blockquote>\n<pre><code>  &lt;div style={{\n    display: &#39;grid&#39;,\n    gridTemplateColumns: &#39;repeat(3, 1fr)&#39;,\n    gap: &#39;20px&#39;,\n    marginTop: &#39;20px&#39;\n  }}&gt;\n    &lt;div style={{ border: &#39;1px solid #ddd&#39;, padding: &#39;20px&#39; }}&gt;\n      &lt;h3&gt;\uce74\ub4dc 1&lt;\/h3&gt;\n      &lt;p&gt;\uccab \ubc88\uc9f8 \uce74\ub4dc \ub0b4\uc6a9&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/main&gt;\n<\/code><\/pre>\n<p>  );<br \/>\n}<\/p>\n<p>export default MainContent;<\/p>\n<pre><code>&gt; \n&gt; **2\ub2e8\uacc4: App.jsx\uc5d0\uc11c \uc870\ub9bd\ud558\uae30**\n&gt; ```jsx\nimport Header from &#39;.\/Header&#39;;\nimport MainContent from &#39;.\/MainContent&#39;;\nimport Footer from &#39;.\/Footer&#39;;\n\nfunction App() {\n  return (\n    &lt;div style={{\n      display: &#39;flex&#39;,\n      flexDirection: &#39;column&#39;,\n      minHeight: &#39;100vh&#39;\n    }}&gt;\n      &lt;Header \/&gt;\n      &lt;MainContent \/&gt;\n      &lt;Footer \/&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n<h2>1.5. \uc870\uac74\ubd80 \ub80c\ub354\ub9c1<\/h2>\n<p>\uc0c1\ud669\uc5d0 \ub530\ub77c \ub2e4\ub978 UI\ub97c \ubcf4\uc5ec\uc918\uc57c \ud560 \ub54c\uac00 \ub9ce\ub2e4. JSX\uc5d0\uc11c\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc870\uac74 \uc5f0\uc0b0\uc790\ub97c \ud65c\uc6a9\ud55c\ub2e4.<\/p>\n<h3>1.5.1. \ubc29\ubc95 1: \uc0bc\ud56d \uc5f0\uc0b0\uc790 (\uc870\uac74 ? \ucc38 : \uac70\uc9d3)<\/h3>\n<p>\ucc38\/\uac70\uc9d3 \ub450 \uac00\uc9c0 \uacbd\uc6b0\ub97c \ubaa8\ub450 \ucc98\ub9ac\ud560 \ub54c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">{isLoggedIn ? (\n  &lt;button&gt;\ub85c\uadf8\uc544\uc6c3&lt;\/button&gt;\n) : (\n  &lt;button&gt;\ub85c\uadf8\uc778&lt;\/button&gt;\n)}\n<\/code><\/pre>\n<h3>1.5.2. \ubc29\ubc95 2: AND \uc5f0\uc0b0\uc790 (&amp;&amp;)<\/h3>\n<p>\uc870\uac74\uc774 <strong>\ucc38\uc77c \ub54c\ub9cc<\/strong> \ubcf4\uc5ec\uc8fc\uace0, \uac70\uc9d3\uc774\uba74 \uc544\ubb34\uac83\ub3c4 \uc548 \ubcf4\uc5ec\uc904 \ub54c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">{messageCount &gt; 0 &amp;&amp; (\n  &lt;div&gt;\uc0c8 \uba54\uc2dc\uc9c0 {messageCount}\uac1c&lt;\/div&gt;\n)}\n<\/code><\/pre>\n<h3>1.5.3. \ubc29\ubc95 3: \ubcc0\uc218\uc5d0 \uc800\uc7a5\ud558\uae30<\/h3>\n<p>\uc870\uac74\uc774 \ubcf5\uc7a1\ud558\uba74 JSX \ubc16\uc5d0\uc11c \ucc98\ub9ac\ud558\uace0 \ubcc0\uc218\uc5d0 \uc800\uc7a5\ud558\ub294 \uac83\uc774 \ub354 \uae54\ub054\ud558\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">let content;\nif (user.age &lt; 18) {\n  content = &lt;p&gt;\ubbf8\uc131\ub144\uc790\ub294 \uc774\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.&lt;\/p&gt;;\n} else {\n  content = &lt;p&gt;\ud658\uc601\ud569\ub2c8\ub2e4!&lt;\/p&gt;;\n}\n\nreturn &lt;div&gt;{content}&lt;\/div&gt;;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1. JSX \ubb38\ubc95\uacfc \ucef4\ud3ec\ub10c\ud2b8 React\uc758 \ud575\uc2ec\uc778 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4dc\ub294 \ubc95\uacfc, \uc774\ub97c \uc704\ud574 \uc0ac\uc6a9\ud558\ub294 JSX \ubb38\ubc95\uc744 \uc644\ubcbd\ud788 \uc775\ud78c\ub2e4. 1.1. \ucef4\ud3ec\ub10c\ud2b8\uc640 JSX\uc758 \uad00\uacc4 1.1.1. \ucef4\ud3ec\ub10c\ud2b8\ub780? \ucef4\ud3ec\ub10c\ud2b8(Component)\ub294 React\uc5d0\uc11c UI\ub97c \ub9cc\ub4dc\ub294 \uae30\ubcf8 \ub2e8\uc704\ub2e4. \ub808\uace0 \ube14\ub85d\ucc98\ub7fc \uc791\uc740 \ubd80\ud488\ub4e4\uc744 \uc870\ub9bd\ud574\uc11c \uc804\uccb4 \ud654\uba74\uc744 \ub9cc\ub4e0\ub2e4\uace0 \uc0dd\uac01\ud558\uba74 \ub41c\ub2e4. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud568\uc218: React \ucef4\ud3ec\ub10c\ud2b8\ub294 \uadf8\ub0e5 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud568\uc218\ub2e4 UI \ubc18\ud658: \uc774 \ud568\uc218\ub294 \ud654\uba74\uc5d0 \uadf8\ub9b4 \ub0b4\uc6a9\uc744 \ubc18\ud658\ud55c\ub2e4 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5: &#8230; <a title=\"JSX \ubb38\ubc95\uacfc \ucef4\ud3ec\ub10c\ud2b8\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=65\" aria-label=\"JSX \ubb38\ubc95\uacfc \ucef4\ud3ec\ub10c\ud2b8\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-65","post","type-post","status-publish","format-standard","hentry","category-react-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/65","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=65"}],"version-history":[{"count":1,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":2249,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/65\/revisions\/2249"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}