{"id":620,"date":"2025-01-09T00:07:00","date_gmt":"2025-01-08T15:07:00","guid":{"rendered":"https:\/\/blog.anchors-biz.com\/?p=620"},"modified":"2025-01-09T17:23:47","modified_gmt":"2025-01-09T08:23:47","slug":"react%ec%9d%98-%ed%95%b5%ec%8b%ac-%ea%b0%9c%eb%85%90-%ec%9d%b4%ed%95%b4%ed%95%98%ea%b8%b0-react-element","status":"publish","type":"post","link":"https:\/\/blog.anchors-biz.com\/?p=620","title":{"rendered":"React\uc758 \ud575\uc2ec \uac1c\ub150 \uc774\ud574\ud558\uae30: React Element"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"576\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-1024x576.png\" alt=\"react\" class=\"wp-image-604\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-1024x576.png 1024w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-300x169.png 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-768x432.png 768w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>React<\/strong>\ub294 \ud6a8\uc728\uc801\uc774\uace0 \uc120\uc5b8\uc801\uc778 UI \uac1c\ubc1c\uc744 \uac00\ub2a5\ud558\uac8c \ud558\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. React\uc758 \uac15\ub825\ud55c \uc131\ub2a5\uacfc \uc720\uc5f0\uc131\uc740 \ub450 \uac00\uc9c0 \ud575\uc2ec \uac1c\ub150,&nbsp;React Element\uc640&nbsp;Virtual DOM\uc5d0 \uae30\ubc18\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 \uc774 \ub450 \uac00\uc9c0 \uac1c\ub150\uc774 \ubb34\uc5c7\uc778\uc9c0, \uadf8\ub9ac\uace0 React\uac00 \uc5b4\ub5bb\uac8c \uc774\ub97c \ud65c\uc6a9\ud574 UI\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud558\ub294\uc9c0 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2><strong>React Element\ub780 \ubb34\uc5c7\uc778\uac00?<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" width=\"650\" height=\"350\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/jsx.jpeg\" alt=\"\" class=\"wp-image-621\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/jsx.jpeg 650w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/jsx-300x162.jpeg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>React Element\ub294 React\uc5d0\uc11c UI\ub97c \ud45c\ud604\ud558\ub294 \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ub2e8\uc704\ub85c, \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud1b5\ud574 UI\ub97c \uad6c\uc131\ud558\uc9c0\ub9cc \uc2e4\uc81c\ub85c \ud654\uba74\uc5d0 \ub80c\ub354\ub9c1\ub418\ub294 \uac83\uc740 React Element\uc785\ub2c8\ub2e4. \ub610\ud55c, React Element\ub294 React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc5d0\uc11c \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud558\uba70, \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc0c1\ud0dc\ub098 props\ub97c \uae30\ubc18\uc73c\ub85c \uc0c8\ub85c\uc6b4 React Element\ub97c \ubc18\ud658\ud558\uba74 React\ub294 \uc774\ub97c Virtual DOM\uc5d0 \ubc18\uc601\ud558\uace0 UI\ub97c \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3><strong>React Element\uc758 \ud2b9\uc9d5<\/strong><\/h3>\n\n\n\n<p><\/p>\n\n\n\n<h4><strong>1. JavaScript \uac1d\uccb4<\/strong><\/h4>\n\n\n\n<p>React Element\ub294 \ud654\uba74\uc5d0 \ud45c\uc2dc\ub420 DOM \ub178\ub4dc\ub098 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub098\ud0c0\ub0b4\ub294&nbsp;<strong>\ubd88\ubcc0 \uac1d\uccb4<\/strong>\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p>JSX\ub85c \uc791\uc131\ub41c \ucf54\ub4dc:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const element = (  \n  &lt;div id=\"container\" className=\"main-container\"&gt;  \n    &lt;h1 style={{ color: 'blue', fontSize: '24px' }}&gt;Hello, React!&lt;\/h1&gt;  \n    &lt;p&gt;  \n      React Element\ub294 UI\ub97c \ud45c\ud604\ud558\ub294 \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ub2e8\uc704\uc785\ub2c8\ub2e4.   \n      \uc544\ub798\ub294 React Element\uc758 \uc8fc\uc694 \ud2b9\uc9d5\uc785\ub2c8\ub2e4:  \n    &lt;\/p&gt;  \n    &lt;ul&gt;  \n      &lt;li&gt;React Element\ub294 \ubd88\ubcc0 \uac1d\uccb4\uc785\ub2c8\ub2e4.&lt;\/li&gt;  \n      &lt;li&gt;React\ub294 \uc0c1\ud0dc\ub098 props\uac00 \ubcc0\uacbd\ub418\uba74 \uc0c8\ub85c\uc6b4 React Element\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.&lt;\/li&gt;  \n      &lt;li&gt;React Element\ub294 Virtual DOM\uc758 \uae30\ubc18\uc774 \ub429\ub2c8\ub2e4.&lt;\/li&gt;  \n    &lt;\/ul&gt;  \n    &lt;button onClick={() =&gt; alert('React Element \ud074\ub9ad!')}&gt;\ud074\ub9ad\ud558\uc138\uc694&lt;\/button&gt;  \n  &lt;\/div&gt;  \n);\n\n<\/code><\/pre>\n\n\n\n<p>\uc704 \ucf54\ub4dc\ub294 React.createElement\ub97c \ud638\ucd9c\ud558\uc5ec \ub2e4\uc74c\uacfc \uac19\uc740 \uac1d\uccb4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const element = {  \n  type: 'div',  \n  props: {  \n    id: 'container',  \n    className: 'main-container',  \n    children: &#91;  \n      {  \n        type: 'h1',  \n        props: {  \n          style: { color: 'blue', fontSize: '24px' },  \n          children: 'Hello, React!',  \n        },  \n      },  \n      {  \n        type: 'p',  \n        props: {  \n          children: 'React Element\ub294 UI\ub97c \ud45c\ud604\ud558\ub294 \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ub2e8\uc704\uc785\ub2c8\ub2e4. \uc544\ub798\ub294 React Element\uc758 \uc8fc\uc694 \ud2b9\uc9d5\uc785\ub2c8\ub2e4:',  \n        },  \n      },  \n      {  \n        type: 'ul',  \n        props: {  \n          children: &#91;  \n            { type: 'li', props: { children: 'React Element\ub294 \ubd88\ubcc0 \uac1d\uccb4\uc785\ub2c8\ub2e4.' } },  \n            { type: 'li', props: { children: 'React\ub294 \uc0c1\ud0dc\ub098 props\uac00 \ubcc0\uacbd\ub418\uba74 \uc0c8\ub85c\uc6b4 React Element\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.' } },  \n            { type: 'li', props: { children: 'React Element\ub294 Virtual DOM\uc758 \uae30\ubc18\uc774 \ub429\ub2c8\ub2e4.' } },  \n          ],  \n        },  \n      },  \n      {  \n        type: 'button',  \n        props: {  \n          onClick: () =&gt; alert('React Element \ud074\ub9ad!'),  \n          children: '\ud074\ub9ad\ud558\uc138\uc694',  \n        },  \n      },  \n    ],  \n  },  \n};<\/code><\/pre>\n\n\n\n<div style=\"height:36px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>2. \ubd88\ubcc0\uc131(Immutability)<\/strong><\/h4>\n\n\n\n<p>React Element\ub294 <strong>\ubd88\ubcc0 \uac1d\uccb4<\/strong>(Immutable Object)\uc785\ub2c8\ub2e4. \uc774\ub294 React Element\uac00 \ud55c \ubc88 \uc0dd\uc131\ub418\uba74 \ubcc0\uacbd\ub418\uc9c0 \uc54a\ub294\ub2e4\ub294 \uac83\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. React\ub294 \uc0c1\ud0dc(state)\ub098 props\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 React Element\ub97c \uc0dd\uc131\ud558\uba70, \uc774\uc804 React Element\ub97c \uc9c1\uc811 \uc218\uc815\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ubd88\ubcc0\uc131\uc740 React\uc758 \ud6a8\uc728\uc801\uc778 \ub80c\ub354\ub9c1\uacfc Virtual DOM\uc758 \uc791\ub3d9 \uc6d0\ub9ac\ub97c \uc774\ud574\ud558\ub294 \ub370 \uc911\uc694\ud55c \uac1c\ub150\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h5><strong>React Element\uac00 \ubd88\ubcc0\uc778 \uc774\uc720<\/strong><\/h5>\n\n\n\n<p>React Element\uac00 \ubd88\ubcc0\uc73c\ub85c \uc124\uacc4\ub41c \uc774\uc720\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n<ol><li><strong>\ubcc0\uacbd \ucd94\uc801\uc758 \uc6a9\uc774\uc131<\/strong><ul><li>React\ub294 \uc0c1\ud0dc\ub098 props\uac00 \ubcc0\uacbd\ub420 \ub54c \uc0c8\ub85c\uc6b4 React Element\ub97c \uc0dd\uc131\ud558\uace0, \uc774\uc804 React Element\uc640 \uc0c8\ub85c\uc6b4 React Element\ub97c \ube44\uad50(diffing)\ud558\uc5ec \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ud569\ub2c8\ub2e4.<\/li><li>React Element\uac00 \ubd88\ubcc0\uc774\uae30 \ub54c\ubb38\uc5d0, React\ub294 \uc774\uc804 \uc0c1\ud0dc\ub97c \uc548\uc804\ud558\uac8c \ucc38\uc870\ud560 \uc218 \uc788\uc73c\uba70, \ubcc0\uacbd \uc0ac\ud56d\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \ucd94\uc801\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>Virtual DOM\uc758 \ud6a8\uc728\uc131<\/strong><ul><li>Virtual DOM\uc740 React Element\ub97c \uae30\ubc18\uc73c\ub85c \uc0dd\uc131\ub429\ub2c8\ub2e4. React Element\uac00 \ubd88\ubcc0\uc774\uae30 \ub54c\ubb38\uc5d0, React\ub294 Virtual DOM\uc5d0\uc11c \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \uacc4\uc0b0(diffing)\ud558\uace0, \ucd5c\uc18c\ud55c\uc758 DOM \uc5c5\ub370\uc774\ud2b8\ub97c \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li>\ub9cc\uc57d React Element\uac00 \uac00\ubcc0\uc801\uc774\uc5c8\ub2e4\uba74, \ubcc0\uacbd \uc0ac\ud56d\uc744 \ucd94\uc801\ud558\uae30 \uc704\ud574 \ub354 \ubcf5\uc7a1\ud55c \ub85c\uc9c1\uc774 \ud544\uc694\ud588\uc744 \uac83\uc785\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>\ucf54\ub4dc\uc758 \uc548\uc815\uc131\uacfc \uc608\uce21 \uac00\ub2a5\uc131<\/strong><ul><li>\ubd88\ubcc0 \uac1d\uccb4\ub294 \ucf54\ub4dc\uc758 \uc548\uc815\uc131\uc744 \ub192\uc774\uace0, \uc608\uce21 \uac00\ub2a5\ud55c \ub3d9\uc791\uc744 \ubcf4\uc7a5\ud569\ub2c8\ub2e4.<\/li><li>React Element\uac00 \ubd88\ubcc0\uc774\uae30 \ub54c\ubb38\uc5d0, \uac1c\ubc1c\uc790\ub294 React Element\ub97c \uc9c1\uc811 \uc218\uc815\ud558\ub294 \uc2e4\uc218\ub97c \ubc29\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>3. UI\uc758 \uc2a4\ub0c5\uc0f7<\/strong><\/h4>\n\n\n\n<p>React Element\ub294 UI\uc758 \ud604\uc7ac \uc0c1\ud0dc\ub97c \ub098\ud0c0\ub0b4\ub294&nbsp;\uc2a4\ub0c5\uc0f7(Snapshot)&nbsp;\uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. React\uc5d0\uc11c UI\ub294 React Element\ub85c \ud45c\ud604\ub418\uba70, React Element\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0c1\ud0dc(state)\uc640 props\ub97c \uae30\ubc18\uc73c\ub85c \uc0dd\uc131\ub429\ub2c8\ub2e4. React\ub294 \uc0c1\ud0dc\ub098 props\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 React Element\ub97c \uc0dd\uc131\ud558\uc5ec UI\uc758 \uc0c8\ub85c\uc6b4 \uc2a4\ub0c5\uc0f7\uc744 \ub9cc\ub4ed\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc2a4\ub0c5\uc0f7\uc740 React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc640 Virtual DOM \uc5c5\ub370\uc774\ud2b8\uc758 \ud575\uc2ec\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<h5><strong>UI\uc758 \uc2a4\ub0c5\uc0f7\uc774\ub780 \ubb34\uc5c7\uc778\uac00?<\/strong><\/h5>\n\n\n\n<p>UI\uc758 \uc2a4\ub0c5\uc0f7\uc740 \ud2b9\uc815 \uc2dc\uc810\uc5d0\uc11c\uc758 UI \uc0c1\ud0dc\ub97c React Element\ub85c \ud45c\ud604\ud55c \uac83\uc785\ub2c8\ub2e4. React\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0c1\ud0dc\uc640 props\ub97c \uae30\ubc18\uc73c\ub85c React Element\ub97c \uc0dd\uc131\ud558\uba70, \uc774 React Element\ub294 UI\uc758 \ud604\uc7ac \uc0c1\ud0dc\ub97c \uc815\ud655\ud788 \ubc18\uc601\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h5><strong>\uc2a4\ub0c5\uc0f7\uc758 \ud2b9\uc9d5<\/strong><\/h5>\n\n\n\n<ol><li><strong>\uc815\uc801\uc778 UI \uc0c1\ud0dc \ud45c\ud604<\/strong><ul><li>React Element\ub294 \ud2b9\uc815 \uc2dc\uc810\uc5d0\uc11c\uc758 UI \uc0c1\ud0dc\ub97c \ub098\ud0c0\ub0b4\uba70, \ubcc0\uacbd\ub418\uc9c0 \uc54a\ub294 \ubd88\ubcc0 \uac1d\uccb4\uc785\ub2c8\ub2e4.<\/li><li>\uc0c1\ud0dc\ub098 props\uac00 \ubcc0\uacbd\ub418\uba74 \uc0c8\ub85c\uc6b4 React Element\uac00 \uc0dd\uc131\ub418\uc5b4 \uc0c8\ub85c\uc6b4 \uc2a4\ub0c5\uc0f7\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>Virtual DOM\uc758 \uae30\ubc18<\/strong><ul><li>React Element\ub294 Virtual DOM\uc744 \uad6c\uc131\ud558\ub294 \uae30\ubcf8 \ub2e8\uc704\uc785\ub2c8\ub2e4.<\/li><li>React\ub294 \uc774\uc804 React Element\uc640 \uc0c8\ub85c\uc6b4 React Element\ub97c \ube44\uad50(diffing)\ud558\uc5ec \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>\ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc758 \uc2dc\uc791\uc810<\/strong><ul><li>React\ub294 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ubc18\ud658\ud558\ub294 React Element\ub97c \uae30\ubc18\uc73c\ub85c \ub80c\ub354\ub9c1\uc744 \uc218\ud589\ud569\ub2c8\ub2e4.<\/li><li>React Element\ub294 UI\uc758 &#8220;\ubb34\uc5c7\uc744 \ub80c\ub354\ub9c1\ud560\uc9c0&#8221;\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud45c\ud604\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n<div style=\"height:26px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3><strong>JSX\uc640 React\uc758 \uc8fc\uc694 \uac1c\ub150: <\/strong><\/h3>\n\n\n\n<h4><strong>JSX, ReactNode, JSX.Element, ReactElement<\/strong><\/h4>\n\n\n\n<p>React\ub97c \ucc98\uc74c \ubc30\uc6b0\ub294 \ucd08\ubcf4 \uac1c\ubc1c\uc790\ub4e4\uc740 \uc885\uc885 JSX\ub97c HTML\uacfc \ub3d9\uc77c\ud558\uac8c \uc0dd\uac01\ud558\ub294 \uc2e4\uc218\ub97c \ud569\ub2c8\ub2e4. \ud558\uc9c0\ub9cc JSX\ub294 HTML\uc774 \uc544\ub2c8\uba70, React\uc5d0\uc11c UI\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud45c\ud604\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ud558\ub294&nbsp;<strong>JavaScript \ud655\uc7a5 \ubb38\ubc95<\/strong>\uc785\ub2c8\ub2e4. JSX\ub294 HTML\uacfc \ube44\uc2b7\ud55c \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud558\uc9c0\ub9cc, \uc2e4\uc81c\ub85c\ub294 JavaScript \ucf54\ub4dc\ub85c \ubcc0\ud658\ub429\ub2c8\ub2e4. React\ub294 JSX\ub97c&nbsp;<code>React.createElement<\/code>&nbsp;\ud568\uc218 \ud638\ucd9c\ub85c \ubcc0\ud658\ud558\uc5ec React Element\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c JSX\ub294 HTML\uc758 \ub300\uccb4\ubb3c\uc774 \uc544\ub2c8\ub77c, React\uc5d0\uc11c UI\ub97c \uc815\uc758\ud558\uae30 \uc704\ud55c \ub3c4\uad6c\ub85c, React Element\ub97c \uc0dd\uc131\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p>React\uc5d0\uc11c UI\ub97c \uad6c\uc131\ud558\ub294 \ub370 \uc0ac\uc6a9\ub418\ub294 \uc8fc\uc694 \uac1c\ub150\uc73c\ub85c\ub294&nbsp;<code>ReactNode<\/code>,&nbsp;<code>JSX.Element<\/code>, \uadf8\ub9ac\uace0&nbsp;<code>ReactElement<\/code>\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub4e4\uc740 \ubaa8\ub450 React\uc5d0\uc11c UI\ub97c \ud45c\ud604\ud558\ub294 \ub370 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud558\uc9c0\ub9cc, \uac01\uae30 \ub2e4\ub978 \ubc94\uc704\uc640 \uc0ac\uc6a9 \uc0ac\ub840\ub97c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\uc5d0\uc11c \uc774 \uac1c\ub150\ub4e4\uc744 \ube44\uad50\ud558\uace0, \ucc28\uc774\uc810\uacfc \uc0ac\uc6a9 \uc0ac\ub840\ub97c \uba85\ud655\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:51px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>1. JSX\uc640 React Element<\/strong><\/h4>\n\n\n\n<p>JSX\ub294 React\uc5d0\uc11c UI\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud45c\ud604\ud558\uae30 \uc704\ud55c \ubb38\ubc95\uc801 \uc124\ud0d5(Syntactic Sugar)\uc785\ub2c8\ub2e4. JSX\ub97c \uc0ac\uc6a9\ud558\uba74 HTML\uacfc \uc720\uc0ac\ud55c \ubb38\ubc95\uc73c\ub85c React Element\ub97c \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc JSX\ub294 \ube0c\ub77c\uc6b0\uc800\uac00 \uc774\ud574\ud560 \uc218 \uc788\ub294 \ubb38\ubc95\uc774 \uc544\ub2c8\uae30 \ub54c\ubb38\uc5d0, React\ub294 \uc774\ub97c&nbsp;<code>React.createElement<\/code>&nbsp;\ud568\uc218 \ud638\ucd9c\ub85c \ubcc0\ud658\ud558\uc5ec React Element\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h5><strong>JSX\uc640 React Element\uc758 \uad00\uacc4<\/strong><\/h5>\n\n\n\n<ul><li>JSX\ub294 React Element\ub97c \uc0dd\uc131\ud558\uae30 \uc704\ud55c \ubb38\ubc95\uc785\ub2c8\ub2e4.<\/li><li>React Element\ub294 React\uc5d0\uc11c UI\ub97c \ud45c\ud604\ud558\ub294 \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ub2e8\uc704\ub85c, \ubd88\ubcc0 \uac1d\uccb4\uc785\ub2c8\ub2e4.<\/li><li>JSX\ub85c \uc791\uc131\ub41c \ucf54\ub4dc\ub294 \ub0b4\ubd80\uc801\uc73c\ub85c&nbsp;<code>React.createElement<\/code>\ub97c \ud638\ucd9c\ud558\uc5ec React Element\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ JSX\ub85c \uc791\uc131\ub41c React Element\nconst element = &lt;h1&gt;Hello, React!&lt;\/h1&gt;;\n\n\/\/ React.createElement\ub85c \uc791\uc131\ub41c \ub3d9\uc77c\ud55c React Element\nconst element2 = React.createElement(\"h1\", null, \"Hello, React!\");\n\n<\/code><\/pre>\n\n\n\n<p>\uc704 \ub450 \ucf54\ub4dc\ub294 \ub3d9\uc77c\ud55c React Element\ub97c \uc0dd\uc131\ud558\uba70, React\ub294 \uc774\ub97c Virtual DOM\uc5d0 \ubc18\uc601\ud558\uc5ec UI\ub97c \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>2. ReactNode<\/strong><\/h4>\n\n\n\n<p><code>ReactNode<\/code>\ub294 React\uc5d0\uc11c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub294&nbsp;<strong>\ubaa8\ub4e0 \uac12<\/strong>\uc744 \ud3ec\ud568\ud558\ub294 \uac00\uc7a5 \ud3ec\uad04\uc801\uc778 \ud0c0\uc785\uc785\ub2c8\ub2e4. React \ucef4\ud3ec\ub10c\ud2b8\uac00 \ubc18\ud658\ud560 \uc218 \uc788\ub294 \ubaa8\ub4e0 \uac12\uc774&nbsp;<code>ReactNode<\/code>\uc5d0 \ud574\ub2f9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h5><strong>ReactNode\uc758 \ud2b9\uc9d5<\/strong><\/h5>\n\n\n\n<ul><li><code>ReactNode<\/code>\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uac12\ub4e4\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4:<ul><li><code>string<\/code>&nbsp;(\uc608:&nbsp;<code>\"Hello\"<\/code>)<\/li><li><code>number<\/code>&nbsp;(\uc608:&nbsp;<code>123<\/code>)<\/li><li><code>boolean<\/code>&nbsp;(\uc608:&nbsp;<code>true<\/code>,&nbsp;<code>false<\/code>) \u2192 \ub80c\ub354\ub9c1\ub418\uc9c0 \uc54a\uc74c<\/li><li><code>null<\/code>&nbsp;\ub610\ub294&nbsp;<code>undefined<\/code>&nbsp;\u2192 \ub80c\ub354\ub9c1\ub418\uc9c0 \uc54a\uc74c<\/li><li><code>ReactElement<\/code>&nbsp;(JSX\ub85c \uc0dd\uc131\ub41c React \uc694\uc18c)<\/li><li><code>ReactFragment<\/code>&nbsp;(\uc5ec\ub7ec \uc694\uc18c\ub97c \uadf8\ub8f9\ud654\ud558\ub294 \ub370 \uc0ac\uc6a9)<\/li><li>\ubc30\uc5f4 (ReactNode\uc758 \ubc30\uc5f4)<\/li><li><code>Portal<\/code>&nbsp;(React Portal\ub85c \ub80c\ub354\ub9c1\ub41c \uc694\uc18c)<\/li><\/ul><\/li><\/ul>\n\n\n\n<h5><strong>ReactNode\uc758 \uc0ac\uc6a9 \uc0ac\ub840<\/strong><\/h5>\n\n\n\n<ul><li>\ucef4\ud3ec\ub10c\ud2b8\uc758&nbsp;<code>children<\/code>&nbsp;\ud0c0\uc785\uc73c\ub85c \uc790\uc8fc \uc0ac\uc6a9\ub429\ub2c8\ub2e4.\uc608\ub97c \ub4e4\uc5b4,&nbsp;<code>children<\/code>\uc774 \ubb38\uc790\uc5f4, JSX, \ub610\ub294 \ub2e4\ub978 React \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud3ec\ud568\ud560 \uc218 \uc788\ub294 \uacbd\uc6b0:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>type Props = {\n  children: React.ReactNode;\n};\n\nconst Wrapper: React.FC&lt;Props&gt; = ({ children }) =&gt; {\n  return &lt;div className=\"wrapper\"&gt;{children}&lt;\/div&gt;;\n};<\/code><\/pre>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>3. JSX.Element<\/strong><\/h4>\n\n\n\n<p><code>JSX.Element<\/code>\ub294 JSX \ubb38\ubc95\uc73c\ub85c \uc0dd\uc131\ub41c&nbsp;<strong>React Element<\/strong>\uc758 \ud0c0\uc785\uc785\ub2c8\ub2e4. JSX\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc791\uc131\ub41c \ubaa8\ub4e0 \uc694\uc18c\ub294&nbsp;<code>JSX.Element<\/code>&nbsp;\ud0c0\uc785\uc744 \uac00\uc9d1\ub2c8\ub2e4.<\/p>\n\n\n\n<h5><strong>JSX.Element\uc758 \ud2b9\uc9d5<\/strong><\/h5>\n\n\n\n<ul><li>JSX\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0dd\uc131\ub41c React Element\ub9cc \ud3ec\ud568\ud569\ub2c8\ub2e4.<\/li><li><code>JSX.Element<\/code>\ub294&nbsp;<code>ReactElement<\/code>\uc758 \ud2b9\uc815 \ud0c0\uc785\uc73c\ub85c, \uc77c\ubc18\uc801\uc73c\ub85c JSX \ubb38\ubc95\uc73c\ub85c \uc0dd\uc131\ub41c \uc694\uc18c\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<h5><strong>JSX.Element\uc758 \uc0ac\uc6a9 \uc0ac\ub840<\/strong><\/h5>\n\n\n\n<ul><li>\ucef4\ud3ec\ub10c\ud2b8\uac00 JSX\ub97c \ubc18\ud658\ud560 \ub54c \ud0c0\uc785\uc744 \uba85\uc2dc\uc801\uc73c\ub85c \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\nconst MyComponent = (): JSX.Element =&gt; {\n  return &lt;div&gt;This is a JSX.Element&lt;\/div&gt;;\n};<\/code><\/pre>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>4. ReactElement<\/strong><\/h4>\n\n\n\n<p><code>ReactElement<\/code>\ub294 React\uc5d0\uc11c UI\ub97c \ud45c\ud604\ud558\ub294&nbsp;<strong>\ubd88\ubcc0 \uac1d\uccb4<\/strong>\ub85c, React Element\uc758 \ud0c0\uc785\uc744 \ub098\ud0c0\ub0c5\ub2c8\ub2e4.&nbsp;<code>ReactElement<\/code>\ub294 JSX\ub97c \uc0ac\uc6a9\ud558\uac70\ub098&nbsp;<code>React.createElement<\/code>\ub97c \ud638\ucd9c\ud558\uc5ec \uc0dd\uc131\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<h5><strong>ReactElement\uc758 \ud2b9\uc9d5<\/strong><\/h5>\n\n\n\n<ul><li><code>ReactElement<\/code>\ub294 React\uc5d0\uc11c UI\ub97c \ud45c\ud604\ud558\ub294 \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ub2e8\uc704\uc785\ub2c8\ub2e4.<\/li><li><code>ReactElement<\/code>\ub294&nbsp;<code>type<\/code>\uacfc&nbsp;<code>props<\/code>\ub97c \ud3ec\ud568\ud558\ub294 \uac1d\uccb4\uc785\ub2c8\ub2e4.<\/li><li>JSX\ub85c \uc0dd\uc131\ub41c \uc694\uc18c\ub294 \ub0b4\ubd80\uc801\uc73c\ub85c&nbsp;<code>React.createElement<\/code>\ub97c \ud638\ucd9c\ud558\uc5ec&nbsp;<code>ReactElement<\/code>\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/li><li><code>ReactElement<\/code>\ub294&nbsp;<code>JSX.Element<\/code>\ubcf4\ub2e4 \ub354 \uc77c\ubc18\uc801\uc778 \ud0c0\uc785\uc73c\ub85c, JSX \uc678\uc5d0\ub3c4&nbsp;<code>React.createElement<\/code>\ub85c \uc0dd\uc131\ub41c \uc694\uc18c\ub97c \ud3ec\ud568\ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<h5><strong>ReactElement\uc758 \uc0ac\uc6a9 \uc0ac\ub840<\/strong><\/h5>\n\n\n\n<ul><li>\ucef4\ud3ec\ub10c\ud2b8\uac00 \ubc18\ud658\ud558\ub294 \uac12\uc774 React Element\uc784\uc744 \uba85\uc2dc\uc801\uc73c\ub85c \uc9c0\uc815\ud560 \ub54c \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const MyComponent = (): React.ReactElement =&gt; {\n  return &lt;div&gt;This is a ReactElement&lt;\/div&gt;;\n};\n<\/code><\/pre>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>5. React.FC\uc640 JSX\uc758 \ucc28\uc774<\/strong><\/h4>\n\n\n\n<p><code>React.FC<\/code>\ub294&nbsp;<strong>React Functional Component<\/strong>\ub97c \uc815\uc758\ud558\uae30 \uc704\ud55c \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \uc720\ud2f8\ub9ac\ud2f0 \ud0c0\uc785\uc785\ub2c8\ub2e4. JSX\ub294 UI\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud45c\ud604\ud558\uae30 \uc704\ud55c \ubb38\ubc95\uc778 \ubc18\uba74,&nbsp;<code>React.FC<\/code>\ub294 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud560 \ub54c \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc774 \ub458\uc740 \uc5ed\ud560\uacfc \uc0ac\uc6a9 \ubaa9\uc801\uc774 \ub2e4\ub985\ub2c8\ub2e4.<\/p>\n\n\n\n<h5><strong>React.FC\uc758 \ud2b9\uc9d5<\/strong><\/h5>\n\n\n\n<ul><li><code>React.FC<\/code>\ub294 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ud0c0\uc785\uc744 \uc815\uc758\ud560 \ub54c \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/li><li>\uae30\ubcf8\uc801\uc73c\ub85c&nbsp;<code>children<\/code>\uc744 \ud3ec\ud568\ud558\ub294 props \ud0c0\uc785\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li><li>\ucef4\ud3ec\ub10c\ud2b8\uc758 \ubc18\ud658\uac12\uc740&nbsp;<code>ReactElement<\/code>\ub85c \uc81c\ud55c\ub429\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<h5><strong>React.FC\uc640 JSX\uc758 \ucc28\uc774<\/strong><\/h5>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"270\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/reactelemnt-1024x270.png\" alt=\"\" class=\"wp-image-625\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/reactelemnt-1024x270.png 1024w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/reactelemnt-300x79.png 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/reactelemnt-768x202.png 768w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/reactelemnt-1536x405.png 1536w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/reactelemnt.png 1707w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3><strong>\uacb0\ub860<\/strong><\/h3>\n\n\n\n<p>React Element\ub294 React\uc5d0\uc11c UI\ub97c \ud45c\ud604\ud558\ub294&nbsp;<strong>\ubd88\ubcc0 \uac1d\uccb4<\/strong>\ub85c, React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc640 Virtual DOM\uc758 \ud575\uc2ec\uc785\ub2c8\ub2e4. React\ub294 \uc0c1\ud0dc(state)\ub098 props\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 React Element\ub97c \uc0dd\uc131\ud558\uc5ec UI\uc758 \uc2a4\ub0c5\uc0f7\uc744 \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ubd88\ubcc0\uc131\uacfc \uc120\uc5b8\ud615 \ud504\ub85c\uadf8\ub798\ubc0d \ubc29\uc2dd \ub355\ubd84\uc5d0 React\ub294 \ud6a8\uc728\uc801\uc73c\ub85c \ubcc0\uacbd \uc0ac\ud56d\uc744 \ucd94\uc801\ud558\uace0, \ucd5c\uc18c\ud55c\uc758 DOM \uc5c5\ub370\uc774\ud2b8\ub97c \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Element\ub294 \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\ubd80\uc5d0\uc11c \ubc18\ud658\ub418\ub294 \uac12\uc73c\ub85c, React\uc758 \ubaa8\ub4e0 UI \uad6c\uc131 \uc694\uc18c\uc758 \uae30\ubcf8 \ub2e8\uc704\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<h4><strong>React\uc758 \uc8fc\uc694 \uac1c\ub150 \uc694\uc57d<\/strong><\/h4>\n\n\n\n<ul><li><strong><code>ReactNode<\/code><\/strong>: \ub80c\ub354\ub9c1 \uac00\ub2a5\ud55c \ubaa8\ub4e0 \uac12\uc744 \ud3ec\ud568\ud558\ub294 \uac00\uc7a5 \ud3ec\uad04\uc801\uc778 \ud0c0\uc785.<\/li><li><strong><code>JSX.Element<\/code><\/strong>: JSX \ubb38\ubc95\uc73c\ub85c \uc0dd\uc131\ub41c React Element\ub9cc \ud3ec\ud568.<\/li><li><strong><code>ReactElement<\/code><\/strong>: React\uc5d0\uc11c UI\ub97c \ud45c\ud604\ud558\ub294 \ubd88\ubcc0 \uac1d\uccb4\ub85c, JSX \ub610\ub294&nbsp;<code>React.createElement<\/code>\ub85c \uc0dd\uc131\ub41c \uc694\uc18c\ub97c \ud3ec\ud568.<\/li><li><strong><code>React.FC<\/code><\/strong>: \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud558\uae30 \uc704\ud55c \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \uc720\ud2f8\ub9ac\ud2f0 \ud0c0\uc785.<\/li><\/ul>\n\n\n\n<h4><strong>React Element\uc758 \uc911\uc694\uc131<\/strong><\/h4>\n\n\n\n<p>React Element\ub97c \uc774\ud574\ud558\ub294 \uac83\uc740 React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc640 Virtual DOM\uc758 \uc791\ub3d9 \uc6d0\ub9ac\ub97c \uc774\ud574\ud558\ub294 \ub370 \ud544\uc218\uc801\uc785\ub2c8\ub2e4. React Element\ub294 UI\uc758 \ud604\uc7ac \uc0c1\ud0dc\ub97c \ub098\ud0c0\ub0b4\ub294 \uc2a4\ub0c5\uc0f7 \uc5ed\ud560\uc744 \ud558\uba70, React\ub294 \uc774\ub97c \uae30\ubc18\uc73c\ub85c \ud6a8\uc728\uc801\uc778 \uc5c5\ub370\uc774\ud2b8\ub97c \uc218\ud589\ud569\ub2c8\ub2e4. React\uc758 \uc120\uc5b8\ud615 \ud504\ub85c\uadf8\ub798\ubc0d \ubc29\uc2dd\uacfc \ubd88\ubcc0\uc131 \uc6d0\uce59\uc740 React Element\ub97c \uc911\uc2ec\uc73c\ub85c \uc791\ub3d9\ud558\uba70, \uc774\ub97c \ud1b5\ud574 React\ub294 \ubcf5\uc7a1\ud55c UI\ub97c \uac04\ub2e8\ud558\uace0 \uc608\uce21 \uac00\ub2a5\ud558\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>React\uc758 \uc774\ub7ec\ud55c \ud575\uc2ec \uac1c\ub150\ub4e4\uc744 \uc774\ud574\ud558\uba74, React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud558\uace0 \uc720\uc9c0\ubcf4\uc218\uc131\uc744 \ub192\uc774\ub294 \ub370 \ud070 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4. React\ub97c \ud6a8\uacfc\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\ub824\uba74 React Element\uc640 \uad00\ub828\ub41c \uac1c\ub150\ub4e4\uc744 \uba85\ud655\ud788 \uc774\ud574\ud558\uace0, \uc774\ub97c \uae30\ubc18\uc73c\ub85c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc124\uacc4\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:62px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" width=\"210\" height=\"210\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work.png\" alt=\"\" class=\"wp-image-607\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work.png 210w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work-150x150.png 150w\" sizes=\"(max-width: 210px) 100vw, 210px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>React\ub294 \ud6a8\uc728\uc801\uc774\uace0 \uc120\uc5b8\uc801\uc778 UI \uac1c\ubc1c\uc744 \uac00\ub2a5\ud558\uac8c \ud558\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. React\uc758 \uac15\ub825\ud55c \uc131\ub2a5\uacfc \uc720\uc5f0\uc131\uc740 \ub450 \uac00\uc9c0 \ud575\uc2ec \uac1c\ub150,&nbsp;React Element\uc640&nbsp;Virtual DOM\uc5d0 \uae30\ubc18\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 \uc774 \ub450 \uac00\uc9c0 \uac1c\ub150\uc774 \ubb34\uc5c7\uc778\uc9c0, \uadf8\ub9ac\uace0 React\uac00 \uc5b4\ub5bb\uac8c \uc774\ub97c \ud65c\uc6a9\ud574 UI\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud558\ub294\uc9c0 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. React Element\ub780 \ubb34\uc5c7\uc778\uac00? React Element\ub294 React\uc5d0\uc11c UI\ub97c \ud45c\ud604\ud558\ub294 \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ub2e8\uc704\ub85c, \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud1b5\ud574 UI\ub97c \uad6c\uc131\ud558\uc9c0\ub9cc \uc2e4\uc81c\ub85c \ud654\uba74\uc5d0 \ub80c\ub354\ub9c1\ub418\ub294 \uac83\uc740 [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false},"categories":[3],"tags":[60,59,55],"_links":{"self":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/620"}],"collection":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=620"}],"version-history":[{"count":9,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/620\/revisions"}],"predecessor-version":[{"id":655,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/620\/revisions\/655"}],"wp:attachment":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}