{"id":828,"date":"2023-12-14T23:14:15","date_gmt":"2023-12-14T14:14:15","guid":{"rendered":"https:\/\/skanto.co.kr\/?p=828"},"modified":"2023-12-18T09:49:38","modified_gmt":"2023-12-18T00:49:38","slug":"react%ec%9d%98-templatejsx%ec%9d%80-%ec%96%b4%eb%96%bb%ea%b2%8c-%eb%8f%99%ec%9e%91%ed%95%a0%ea%b9%8c","status":"publish","type":"post","link":"https:\/\/skanto.co.kr\/?p=828","title":{"rendered":"React\uc758 Template(JSX)\uc740 \uc5b4\ub5bb\uac8c \ub3d9\uc791\ud560\uae4c?"},"content":{"rendered":"\n<p>\uc778\ud130\ub137\uc5d0 \uae00\uc744 \ubcf4\ub2e4\uac00 \ud3c9\uc18c\uc5d0 \uc74c.. \uadf8\ub807\uac8c \ub3d9\uc791\ud558\ub294 \uad70.. \ud558\uc9c0\ub9cc \ub0b4\ubd80\uc5d0\uc11c\ub294 \uc5b4\ub5bb\uac8c \ub3d9\uc791\uc744 \ud558\ub294\uac78\uae4c \ud558\uace0 \uc0dd\uac01\ud558\ub358 \ub0b4\uc6a9\uc744 \ub9c8\uc8fc\ud558\uac8c \ub410\ub2e4. \ub098\uc758 \uad81\uae08\uc99d\uc744 99% \ud574\uacb0\ud574 \uc8fc\ub294 \ub0b4\uc6a9\uc774\ub77c \uc774\ud574\ud55c \ub0b4\uc6a9\uc744 \uc7a0\uc2dc \uc62e\uaca8\ubcfc\uae4c \ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294 \uac1c\ubc1c\uc790\ub4e4 \uc0ac\uc774\uc5d0 React, Vue \ub4f1\uc744 \uc5b8\uae09\ud558\ub294 \uac83\uc744 \ub9ce\uc774 \ubcfc \uc218 \uc788\ub2e4. \uac1c\uc778\uc801\uc73c\ub85c \uc774\ub7f0 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uadf8\ub9ac \uc120\ud638\ud558\uc9c0\ub294 \uc54a\ub294\ub2e4. \uc65c\ub0d0\ud558\uba74 \ud788\ud2b8\uace1\uc774\ub098 \ud328\uc158 \uc544\uc774\ud15c\ucc98\ub7fc \uc7a0\uc2dc \uc654\ub2e4 \uc2a4\uccd0 \uc9c0\ub098\uac00\ub294 \uc720\ud589\ucc98\ub7fc \ubcf4\uc774\uae30 \ub54c\ubb38\uc774\ub2e4. \ud558\uc9c0\ub9cc \uc774\ub4e4 \uadfc\uac04\uc5d0\ub294 \uc5b4\ub5a4 \uae30\uc220\uc774 \ud65c\uc6a9\ub418\uace0 \uc788\ub294\uc9c0 \ud30c\uc545\ud574 \ub193\uc744 \ud544\uc694\ub294 \uc788\ub2e4. \uadf8\ub798\uc57c \uc720\uc0ac\ud55c \ud615\ud0dc\uc758 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \ub098\uc624\ub354\ub77c\ub3c4 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\uace0 \ud2b8\ub79c\ub4dc\ub97c \ube68\ub9ac \ub530\ub77c\uac08 \uc218 \uc788\uae30 \ub54c\ubb38\uc774\ub2e4.<\/p>\n\n\n\n<p>React\uc758 \ud575\uc2ec\uc73c\ub85c \uc5ec\ub7ec \uae30\ub2a5\uc774 \uc788\uaca0\uc9c0\ub9cc \uadf8 \uc911\uc758 \ud558\ub098\uac00 \ud15c\ud50c\ub9bf \uc5d4\uc9c4\uc77c \uac83\uc774\ub2e4. JavaScript\ub97c \uc880 \ub9cc\uc838 \ubcf8 \uc0ac\ub78c\uc774\ub77c\ub3c4 \ubc30\uacbd\uc9c0\uc2dd \uc5c6\uc774 \ud15c\ud50c\ub9bf\uc778 JSX\ub97c \ucc98\uc74c \ub9cc\ub098\uba74 \uace0\uac1c\ub97c \uac38\uc6b0\ub6b1 \ud560 \uc218 \uc788\ub2e4. \uc774 \uae00\uc744 \ud1b5\ud574 \uadf8 \uac38\uc6b0\ub6b1\uc774 \ub044\ub355\uc784\uc73c\ub85c \ubc14\ub00c\uae38 \uae30\ub300\ud574 \ubcf8\ub2e4.<\/p>\n\n\n\n<p>React\uc758 \uadfc\ubcf8\uc744 \uc7a0\uae50 \ud130\uce58\ud558\uc790\uba74 React\ub294 Facebook\uc5d0\uc11c \uac1c\ubc1c\ud55c \uc624\ud508\uc18c\uc18c\uc758 JavaScript UI \ud504\ub808\uc784\uc6cc\ud06c\uc774\ub2e4. \uc989 \uc6f9 UI\ub97c \uac1c\ubc1c\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ud558\uba70, \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ucef4\ud3ec\ub10c\ud2b8 \uac1c\ubc1c\uc774\ub77c\ub294 \uac1c\ub150\uc801 \ubc14\ud0d5\uc744 \ub450\uace0 \uc788\ub2e4. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JSX Scope \ub0b4\uc5d0\uc11c React \uac1d\uccb4\ub97c \uc774\uc6a9\ud560 \uacbd\uc6b0<\/h2>\n\n\n\n<p> JavaScript \ucf54\ub4dc\ub97c \uc791\uc131\ud574 \ubcf8 \uc0ac\ub78c\ub4e4\uc774\ub77c\uba74 \ubc14\ub85c \uc54c\uc544\ucc28\ub9ac\uaca0\uc9c0\ub9cc JSX\ub294 JavaScript \ubb38\ubc95\uacfc\ub294 \ub9de\uc9c0 \uc54a\ub2e4. \ub530\ub77c\uc11c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 \uc774\ub97c \ubc14\ub85c \ub85c\ub529\ud574\uc11c \uc2e4\ud589\ud558\uc9c0 \ubabb\ud55c\ub2e4. \ub530\ub77c\uc11c \ubb38\ubc95\uc5d0 \ub9de\ub294 JavaScrpt\ub85c \ubcc0\ud658\ud558\ub294 \uacfc\uc815\uc774 \ud544\uc694\ud55c\ub370 \uc774\ub97c <strong>Transpile<\/strong>\uc774\ub77c\uace0 \ud55c\ub2e4. \uc774 \uacfc\uc815\uc744 \uac70\uce58\uba74 JSX\uc5d0\uc11c \uae30\uc220 \ub41c HTML tag\ub4e4\uc740 \ube0c\ub77c\uc6b0\uc800\uac00 \uc774\ud574\ud560 \uc218 \uc788\ub3c4\ub85d React.createElement() \uba54\uc18c\ub4dc \ud638\ucd9c \ud589\ud0dc\ub85c \ubcc0\ud658\ub41c\ub2e4. \ub2f9\uc5f0\ud788, Transpile\uc744 \ud558\ub824\uba74 \ud558\ub098\uc758 \uad6c\ubb38\uc744 \ub2e4\ub978 \uad6c\ubb38\uc73c\ub85c \ubcc0\ud658\uc2dc\ucf1c\uc8fc\ub294 Transpiler\uac00 \ud544\uc694\ud558\ub2e4. Babel, TypeScript\uac00 \uc774\ub7f0 \uc5ed\ud560\uc744 \ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc774\ub7f0 \uacfc\uc815\uc740 \ub7f0\ud0c0\uc784\uc774 \uc544\ub2c8\ub77c \ube4c\ub4dc\uacfc\uc815\uc5d0\uc11c \uc218\ud589\ub418\ubbc0\ub85c \ube0c\ub77c\uc6b0\uc800\ub294 \uc774\ub7f0 \uacfc\uc815\uc744 \uc54c \uc218 \uc5c6\ub2e4. \ub2f9\uc5f0\ud55c \uc598\uae30\uaca0\uc9c0\ub9cc \uacb0\uacfc\uc801\uc73c\ub85c \ube0c\ub77c\uc6b0\uc800\ub294 React API\ub85c \uae30\uc220\ub41c Object Tree\ub97c \uc804\ub2ec\ubc1b\uc544 \uc2e4\ud589\ud558\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n<p>\uc774 \uacfc\uc815\uc774 JSX\uac00 \ub3d9\uc791\ud558\ub294 \uae30\ubcf8 \uba54\ucee4\ub2c8\uc998\uc774\ub77c \uc0dd\uac01\ud558\uba74 \ub41c\ub2e4. \uadf8\ub7fc \ud55c\uaebc\ud480 \ub354 \ub4e4\uc5b4\uac00\uc11c \uac04\ub2e8\ud55c \uc608\uc81c\ub97c \ud1b5\ud574 \uc5b4\ub5bb\uac8c \ub3d9\uc791\ud558\ub294\uc9c0 \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react'\nfunction Greet(){\n  return &lt;h1&gt;Hello World!&lt;\/h1&gt;\n}<\/code><\/pre>\n\n\n\n<p>\uc704\uc758 \uac04\ub2e8\ud55c React Component \ucf54\ub4dc\ub97c \uc2e4\ud589\ud558\uba74 \ube0c\ub77c\uc6b0\uc800\uc5d0 &#8220;Hello World!&#8221;\uac00 \ucd9c\ub825\ub420 \uac83\uc774\ub2e4. \uc774 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ucd9c\ub825\uc744 \uc704\ud55c HTML\ucf54\ub4dc\ub97c \ubc18\ud658\ud560 \uac83 \uac19\uc9c0\ub9cc \uadf8\ub807\uc9c0 \uc54a\ub2e4. Greet \ucef4\ud3ec\ub10c\ud2b8\uac00 \ucd9c\ub825\ud558\ub294 h1 \ud0dc\uadf8\ub294 \uc21c\uc218 JavaScript function\uc778 React.createElement()\uc744 \ud638\ucd9c\ud55c \uacb0\uacfc\ub85c \uc0dd\uc131\ub41c\ub2e4. \uc704 \uc608\uc81c\ub294 Transpiler\ub97c \ud1b5\ud574 \uc544\ub798\uc758 \ucf54\ub4dc\ub85c Compile \ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react'\nfunction Greet() {\n  return React.createElement(\"h1\", {}, \"Hello, World!\")\n}<\/code><\/pre>\n\n\n\n<p>JSX \uc608\uc81c\uc5d0\uc11c React\uac1d\uccb4\ub97c \uc9c1\uc811 \ucc38\uc870(reference)\ud558\uc9c0 \uc54a\uc558\uc9c0\ub9cc Compile\ub41c \ucf54\ub4dc\ub97c \ubcf4\uba74 React.createElement()\ub97c \ud638\ucd9c\ud55c\ub2e4\ub294 \uac83\uc5d0 \uc8fc\ubaa9\ud558\uc790. \ub530\ub77c\uc11c Compile\ub41c JavaScript\uac00\ucf54\ub4dc\ub97c \uc2e4\ud589\ud558\uae30 \uc704\ud574\uc11c\ub294 \ud604\uc7ac Scope\uc5d0 React\uac1d\uccb4\uac00 \uc788\uc5b4\uc57c \ud558\ubbc0\ub85c import\ub97c \ud1b5\ud574 \uc774 \uac1d\uccb4\ub97c \uac00\uc838\uc628\ub2e4.<\/p>\n\n\n\n<p>createElement() function\uc740 \uc544\ub798\uc758 Definition\ucc98\ub7fc 3\uac1c\uc758 \ud30c\ub77c\ubbf8\ud130\ub97c \ubc1b\uace0 React element\ub97c \ubc18\ud658\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React.createElement(\n  type,\n  &#91;props],\n  &#91;...children]\n) <\/code><\/pre>\n\n\n\n<p>\uadf8\ub7fc \uc774\uc81c JSX\ub97c \uc774\uc6a9\ud574 React Component\ub97c \uc791\uc131\ud574 \ubcf4\uace0 \uc774\uac83\uc774 \uc77c\ubc18 JavaScript function call\ub85c \uc5b4\ub5bb\uac8c \ubcc0\ud658\ub418\ub294\uc9c0 \uc54c\uc544\ubcf4\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react'\n\nfunction App() {\n  return (\n    &lt;div&gt;\n      &lt;p&gt;This is a list&lt;\/p&gt;\n      &lt;ul&gt;\n        &lt;li&gt;List item 1&lt;\/li&gt;\n        &lt;li&gt;List item 2&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n  );\n};<\/code><\/pre>\n\n\n\n<p>Compile\ud558\uba74 \uc704\uc758 \ucf54\ub4dc\ub294 \uc544\ub798\uc758 \ucf54\ub4dc\ub85c \ubcc0\ud658\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react'\n\nfunction App() {\n  return React.createElement(\n    \"div\",\n    null,\n    React.createElement(\"p\", null, \"This is a list\"),\n    React.createElement(\n    \"ul\",\n    null,\n    React.createElement(\"li\", null, \"List item 1\"),\n    React.createElement(\"li\", null, \"List item 2\"))\n  );\n}<\/code><\/pre>\n\n\n\n<p>JSX Template\uc744 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0 \uc704\uc758 \ucf54\ub4dc\ucc98\ub7fc \uc9c1\uc811 JavaScrpt \ucf54\ub4dc\ub85c \uc791\uc131\ud574\ub3c4 \ub41c\ub2e4. \ud558\uc9c0\ub9cc \ucf54\ub4dc\ub97c \ubcf4\uba74 \uc54c\uac8c \ub418\uc9c0\ub9cc \uc77d\uae30\uac00 \ud798\ub4e4\uace0 \ucf54\ub4dc\uac00 \uc544\ub984\ub2f5\uc9c0 \ubabb\ud558\ub2e4. \uc989, \ucf54\ub4dc \uc791\uc131\uc774 \uc5b4\ub824\uc6b8 \ubfd0\ub9cc \uc544\ub2c8\ub77c \uc720\uc9c0\ubcf4\uc218 \ud558\uae30\uc5d0\ub3c4 \ud798\ub4e4\uc5b4 \ubcf4\uc778\ub2e4. \uc774\uac83\uc774 \ubc14\ub85c JSX\ub97c \ud1b5\ud574 \uae54\ub054\ud55c HTML\ucf54\ub4dc\uc640 JavaScript\uc758 \uac15\uc810\uc744 \ud569\uce5c \uc774\uc720\uc774\uae30\ub3c4 \ud558\ub2e4.<\/p>\n\n\n\n<p>\uc704 \uc608\uc81c\uc758 React.createElement() function\uc774 \ubc18\ud658\ud558\ub294 \uac1d\uccb4\ub294 \uc544\ub798\uc640 \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"type\": \"div\",\n  \"key\": null,\n  \"ref\": null,\n  \"props\": {\n    \"children\": &#91;{\n      \"type\": \"p\",\n      \"key\": null,\n      \"ref\": null,\n      \"props\": {\n        \"children\": \"This is a list\"\n      },\n      \"_owner\": null\n    }, {\n      \"type\": \"ul\",\n      \"key\": null,\n      \"ref\": null,\n      \"props\": {\n        \"children\": &#91;{\n          \"type\": \"li\",\n          \"props\": {\n            \"children\": \"List item 1\"\n          },\n          \/\/ truncated for brevity\n        }, {\n          \"type\": \"li\",\n          \"props\": {\n            \"children\": \"List item 2\"\n          },\n          \/\/ truncated for brevity\n        }]\n      },\n      \"_owner\": null\n    }]\n  },\n  \"_owner\": null\n}<\/code><\/pre>\n\n\n\n<p>\uc774 \ubc18\ud658 \uac1d\uccb4\ub97c React Element\ub77c \ud558\uace0, \ubcf4\uba74 \uc54c\uaca0\uc9c0\ub9cc \uc21c\uc218 JavaScript Object(JSON) \ud615\ud0dc\ub97c \uac00\uc9c4\ub2e4. \uc774 \uac1d\uccb4\ub294 \ud654\uba74\uc5d0 \ubb34\uc5c7\uc744 \ucd9c\ub825\ud560\uc9c0 \uc124\uba85\ud55c\ub2e4. HTML element\ub97c \ub098\ud0c0\ub0b4\uc9c0\ub9cc \ud398\uc774\uc9c0(DOM)\uc5d0 \uc9c1\uc811 \uadf8\ub824\uc9c0\uc9c0\ub294 \uc54a\uace0 virtual DOM\uc774\ub77c\ub294 \uacf3\uc5d0 \uadf8\ub824\uc9c4\ub2e4. React\ub294 \uc774\ub4e4 \uac1d\uccb4\ub97c \uc77d\uc740 \ud6c4 virtual DOM\uc0c1\uc5d0 HTML element\ub97c \uc0dd\uc131\ud558\uae30 \uc704\ud574 \ud65c\uc6a9\ud55c\ub2e4.  \uc774\ub807\uac8c \ud55c \ub2e4\uc74c \uc2e4\uc81c DOM\uacfc sync\ub97c \ub9de\ucd98\ub2e4.<\/p>\n\n\n\n<p>\uc774\ub807\uac8c \ud558\uba74 virtual DOM\uacfc \uc2e4\uc81c DOM\uc5d0 object tree\uac00 \uc0dd\uc131\ub418\uba70 React element\uc5d0 \ubcc0\uacbd\uc774 \uc0dd\uae38 \uacbd\uc6b0 React\uac00 \uc790\ub3d9\uc73c\ub85c \uad00\ub828\ub41c \uc2e4\uc81c DOM element\ub97c \uc5c5\ub370\uc774\ud2b8 \uc2dc\ud0a8\ub2e4.<\/p>\n\n\n\n<p>\uc544\ub798\ub294 \uc885\uc885 \ub9cc\ub098\uac8c \ub420 DOM element\uc758 \uc77c\ubd80 \uc18d\uc131\uc744 \uc124\uba85\ud55c\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>type<\/strong>: React element\uc758 \ud0c0\uc785\uc744 \uae30\uc220\ud55c\ub2e4. &#8220;div&#8221;, &#8220;h1&#8243;\uacfc \uac19\uc740 \ubb38\uc790\uc5f4\uc744 \uae30\uc220\ud558\uac70\ub098 React component(class or function) \ub610\ub294 React fragment\uac00 \ub420 \uc218 \uc788\ub2e4.<\/li>\n\n\n\n<li><strong>props<\/strong>: null \ub610\ub294 property\ub97c \ud45c\ud604\ud558\ub294 object\ub85c \uae30\uc220\ud560 \uc218 \uc788\uc73c\uba70 component\ub85c \uc804\ub2ec\ub41c\ub2e4.<\/li>\n\n\n\n<li><strong>children<\/strong>: \ud574\ub2f9 element\uc758 children element. \uc704\uc5d0\uc11c \ubcf8 \uac83\ucc98\ub7fc \uc778\uc6a9(quoted) \ubb38\uc790\uc5f4\uc77c \uacbd\uc6b0 content\ub294 text\ub85c \uac04\uc8fc\ub41c\ub2e4. \ub2e4\uc911 children\uc744 \ucd94\uac00\ud560 \uacbd\uc6b0 array\ub97c \uc0ac\uc6a9\ud574\uc57c \ud558\uba70 \uc6d0\ud558\ub294 \ub9cc\ud07c \uc911\ucca9(nest)\uc2dc\ud0ac \uc218 \uc788\ub2e4.<\/li>\n\n\n\n<li><strong>key<\/strong>: \ubc30\uc5f4\uc744 \ud1b5\ud55c \ub9e4\ud551\uacfc\uc815\uc5d0\uc11c sibling\ub4e4\uc744 \uc720\uc77c\ud558\uac8c \uc2dd\ubcc4\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub41c\ub2e4.<\/li>\n\n\n\n<li><strong>ref<\/strong>: \uc2e4\uc81c DOM node\uc5d0 \ub300\ud55c reference\uc774\uba70 DOM element \ub610\ub294 Component \uc778\uc2a4\ud134\uc2a4\uc5d0 \uc9c1\uc811 \uc811\uadfc\ud574\uc11c \uc791\uc5c5\ud560 \uc218 \uc788\ub3c4\ub85d \ud55c\ub2e4.<\/li>\n\n\n\n<li><strong>$$typeof<\/strong>: \ud2b9\uc815 object\uac00 React element object\uc778\uc9c0 \ud655\uc778\ud55c\ub2e4. XSS(Cross-site Scripting) \uacf5\uaca9\uc5d0 \ub300\uc751\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub41c\ub2e4. <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"> JSX Scope \ub0b4\uc5d0\uc11c React \uac1d\uccb4\ub97c \uc774\uc6a9\ud558\uc9c0 \uc54a\uc744 \uacbd\uc6b0 (React 17)<\/h2>\n\n\n\n<p>\uc55e\uc5d0\uc11c \uc0b4\ud3b4\ubd24\ub4ef\uc774 JSX\ub97c \uc0ac\uc6a9\ud558\uba74 Compiler\ub294 \ube0c\ub77c\uc6b0\uc800\uac00 \uc774\ud574\ud560 \uc218 \uc788\ub3c4\ub85d React function call\ub85c \ubcc0\ud658\ud55c\ub2e4. React 17 \ucd9c\uc2dc \uc774\ud6c4 Facebook\uc740 Babel\uacfc\uc758 \ud611\uc5c5\uc744 \ud1b5\ud574 \uae30\uc874\uc758 \uc124\uc815\uc5d0 \uc601\ud5a5\uc744 \uc8fc\uc9c0 \uc54a\uc73c\uba74\uc11c\ub3c4 JSX transform\uc744 \uac1c\uc120\ud558\ub294 \uc791\uc5c5\uc744 \uc218\ud589\ud588\ub2e4.<\/p>\n\n\n\n<p>\uc774 \uc5c5\ub370\uc774\ud2b8\ub294 JSX \ubb38\ubc95\uc5d0\ub294 \uc804\ud600 \uc601\ud5a5\uc744 \uc8fc\uc9c0 \uc54a\uc73c\uba70 \ud544\uc218\ub85c \uc801\uc6a9\ud574\uc57c \ud558\ub294 \uac83\ub3c4 \uc544\ub2c8\ub2e4. \uc774\uc804 \ubc84\uc804\uc758 JSX transform\ub3c4 \uc5ec\uc804\ud788 \uc815\uc0c1\uc801\uc73c\ub85c \ub3d9\uc791\ud558\uba70 \ud5a5\ud6c4 \uc774 \uc9c0\uc6d0\uc744 \uc911\ub2e8\ud560 \uacc4\ud68d\ub3c4 \uc5c6\ub2e4\uace0 \ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc774\uc804 \ubc84\uc804\uc5d0\uc11c JSX\ub97c \uc0ac\uc6a9\ud588\uc5c8\ub2e4\uba74 JSX\uac00 React.createElement() call\ub85c \ucef4\ud30c\uc77c\ub418\uae30 \ub54c\ubb38\uc5d0 JSX  scope\uc0c1\uc5d0 React\uac1d\uccb4\uac00 \uc874\uc7ac\ud574\uc57c \ud588\ub2e4. \uc0c8\ub85c\uc6b4 transform\uc5d0\uc11c\ub294  \ud544\uc218\ub85c \uc791\uc131\ud588\ub358 import React from &#8216;react&#8217; \uc120\uc5b8\uc744 \ucef4\ud3ec\ub10c\ud2b8 file\uc5d0\uc11c \uc0dd\ub7b5\ud560 \uc218 \uc788\ub2e4. <strong>\ucd5c\uc0c1\uc704 \ub808\ubca8\uc5d0\uc11c React\ub97c import\ud558\uc9c0 \uc54a\uac70\ub098 Scope\ub0b4\uc5d0 React\uac1d\uccb4\uac00 \uc5c6\uc774\ub3c4 JSX\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uac00\ub2a5\ud574 \uc84c\ub2e4.<\/strong><\/p>\n\n\n\n<p>React 17\uc740 React \ud328\ud0a4\uc9c0\uc5d0 2\uac1c\uc758 \uc0c8\ub85c\uc6b4 entry point\ub97c \ucd94\uac00\ud588\ub2e4. \uc774 entry point\ub294 Babel\uacfc TypeScript\uc640 \uac19\uc774 Compiler \ub0b4\uc5d0\uc11c\ub9cc \uc0ac\uc6a9\ub41c\ub2e4. \ub530\ub77c\uc11c JSX\uac00 React.createElement()\ub85c \ubcc0\ud658\ud558\uc9c0 \uc54a\uace0 \uc0c8\ub85c\uc6b4 JSX transform\uc740 \uc790\ub3d9\uc73c\ub85c React \ud328\ud0a4\uc9c0\uc758 \uc0c8\ub85c\uc6b4 entry point\ub85c\ubd80\ud130 special function\uc744 import\ud55c \ud6c4 \ud638\ucd9c \ud55c\ub2e4.<\/p>\n\n\n\n<p>\ub530\ub77c\uc11c, \uc544\ub798\uc640 \uac19\uc774 \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Greet(){\n  return &lt;h1&gt;Hello World!&lt;\/h1&gt;;\n} <\/code><\/pre>\n\n\n\n<p>\uc0c8\ub85c\uc6b4 transform\uc744 \uc774\uc6a9\ud558\uba74 \uc9c1\uc811 React\ub97c import\ud558\uc9c0 \uc54a\uace0\ub3c4 JSX\ub97c \uc774\uc6a9\ud558\uc5ec \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc791\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Inserted by a compiler (don't import it yourself!)\nimport {jsx as _jsx} from 'react\/jsx-runtime';\n\nfunction App() {\n  return _jsx('h1', { children: 'Hello world' });\n}<\/code><\/pre>\n\n\n\n<p>\uc704 \ucf54\ub4dc\ub97c \ubcf4\uba74 React\ub97c import\ud558\uc9c0 \uc54a\uace0 \uc791\uc131\ub41c \uac83\uc744 \uc54c \uc218 \uc788\ub2e4. \uc9c1\uc811 import\ub97c \uc791\uc131\ud558\uc9c0 \uc54a\uc544\ub3c4 Compiler\uac00 \ub0b4\ubd80\uc801\uc73c\ub85c \uc774\ub97c \ucc98\ub9ac\ud574 \uc900\ub2e4.<\/p>\n\n\n\n<p>\uc774\ub807\uac8c \ud558\uba74 \ucf54\ub4dc \uc791\uc131\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\uace0 \ucf54\ub4dc\uc5d0\uc11c \ubcf4\ub4ef\uc774 React.createElement()\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc544 \uc18d\ub3c4\ub3c4 \uac1c\uc120\uc2dc\ucf1c \uc900\ub2e4. \ud558\uc9c0\ub9cc React\uac1d\uccb4\ub294 \uc5ec\uc804\ud788 compiler\uac00 import\uc2dc\ud0a4\uace0 \uc788\ub2e4. \uc774 \ubcc0\ud654\ub294 \uae30\uc874 \uc791\uc131\ub41c JSX \ucf54\ub4dc\uc640 \uc644\ubcbd\ud558\uac8c \ud638\ud658\ud55c\ub2e4. \ub530\ub77c\uc11c, \uae30\uc874\uc5d0 \uc791\uc131\ub41c \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\uc2dc \ubcc0\uacbd\ud560 \ud544\uc694\ub294 \uc5c6\ub2e4.<\/p>\n\n\n\n<p>react\/jsx-runtime\uacfc react\/jsx-dev-runtime\uc5d0 \ud3ec\ud568\ub41c function\ub4e4\uc740 Compiler\uac00 transform\ud558\ub294 \uacfc\uc815\uc5d0\uc11c\ub9cc \uc0ac\uc6a9\ud558\ubbc0\ub85c JavaScript\ucf54\ub4dc \ub0b4\uc5d0\uc11c element\ub97c \uc9c1\uc811 \uc0dd\uc131\ud558\ub824\uace0 \ud560 \uacbd\uc6b0 \uae30\uc874\uc5d0 \ud588\ub358 \ubc29\ubc95\uacfc \ub3d9\uc77c\ud558\uac8c React.createElement\ub97c \uc0ac\uc6a9\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n<p>\ucc38\uace0: <a href=\"https:\/\/www.telerik.com\/blogs\/how-jsx-react-works-under-hood\">How JSX (React) Works Under the Hood<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc778\ud130\ub137\uc5d0 \uae00\uc744 \ubcf4\ub2e4\uac00 \ud3c9\uc18c\uc5d0 \uc74c.. \uadf8\ub807\uac8c \ub3d9\uc791\ud558\ub294 \uad70.. \ud558\uc9c0\ub9cc \ub0b4\ubd80\uc5d0\uc11c\ub294 \uc5b4\ub5bb\uac8c \ub3d9\uc791\uc744 \ud558\ub294\uac78\uae4c \ud558\uace0 \uc0dd\uac01\ud558\ub358 \ub0b4\uc6a9\uc744 \ub9c8\uc8fc\ud558\uac8c \ub410\ub2e4. \ub098\uc758 \uad81\uae08\uc99d\uc744 99% \ud574\uacb0\ud574 \uc8fc\ub294 \ub0b4\uc6a9\uc774\ub77c \uc774\ud574\ud55c \ub0b4\uc6a9\uc744 \uc7a0\uc2dc \uc62e\uaca8\ubcfc\uae4c \ud55c\ub2e4. \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294 \uac1c\ubc1c\uc790\ub4e4 \uc0ac\uc774\uc5d0 React, Vue \ub4f1\uc744 \uc5b8\uae09\ud558\ub294 \uac83\uc744 \ub9ce\uc774 \ubcfc \uc218 \uc788\ub2e4. \uac1c\uc778\uc801\uc73c\ub85c \uc774\ub7f0 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uadf8\ub9ac \uc120\ud638\ud558\uc9c0\ub294 \uc54a\ub294\ub2e4. \uc65c\ub0d0\ud558\uba74 \ud788\ud2b8\uace1\uc774\ub098 \ud328\uc158 \uc544\uc774\ud15c\ucc98\ub7fc \uc7a0\uc2dc \uc654\ub2e4 \uc2a4\uccd0 \uc9c0\ub098\uac00\ub294 \uc720\ud589\ucc98\ub7fc \ubcf4\uc774\uae30 \ub54c\ubb38\uc774\ub2e4. \ud558\uc9c0\ub9cc \uc774\ub4e4 \uadfc\uac04\uc5d0\ub294 \uc5b4\ub5a4 \uae30\uc220\uc774 \ud65c\uc6a9\ub418\uace0 \uc788\ub294\uc9c0 \ud30c\uc545\ud574 \ub193\uc744 \ud544\uc694\ub294 \uc788\ub2e4. \uadf8\ub798\uc57c \uc720\uc0ac\ud55c \ud615\ud0dc\uc758 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \ub098\uc624\ub354\ub77c\ub3c4 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\uace0&#8230;<\/p>\n<p class=\"read-more\"><a class=\"btn btn-default\" href=\"https:\/\/skanto.co.kr\/?p=828\"> Read More<span class=\"screen-reader-text\">  Read More<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[14],"tags":[88,91,89,90],"class_list":["post-828","post","type-post","status-publish","format-standard","hentry","category-sw-development","tag-javascript","tag-jsx","tag-react","tag-template"],"_links":{"self":[{"href":"https:\/\/skanto.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skanto.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/skanto.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/skanto.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skanto.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=828"}],"version-history":[{"count":33,"href":"https:\/\/skanto.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/828\/revisions"}],"predecessor-version":[{"id":863,"href":"https:\/\/skanto.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/828\/revisions\/863"}],"wp:attachment":[{"href":"https:\/\/skanto.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/skanto.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/skanto.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}