{"id":580,"date":"2024-11-21T09:06:14","date_gmt":"2024-11-21T00:06:14","guid":{"rendered":"https:\/\/reasty.net\/?p=580"},"modified":"2024-12-27T08:23:31","modified_gmt":"2024-12-26T23:23:31","slug":"02-%eb%a6%ac%ec%95%a1%ed%8a%b8-%eb%8f%99%ec%9e%91-%ec%9b%90%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/reasty.net\/?p=580","title":{"rendered":"02. \ub9ac\uc561\ud2b8 \ub3d9\uc791 \uc6d0\ub9ac"},"content":{"rendered":"\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">02-1 \uac00\uc0c1 DOM \uc774\ud574\ud558\uae30<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uad6c\uc131\ud558\ub294 3\uc694\uc18c &#8211; \uac00\uc0c1 DOM(Virtual DOM), JSX(JavaScript XML), \ucef4\ud3ec\ub10c\ud2b8(Component)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React.StrictMode &#8211; \ucf54\ub4dc\uac00 \uc798\ubabb\ub418\uc5c8\ub294\uc9c0 \ud310\ub2e8\ud558\uc5ec \uc624\ub958 \uba54\uc138\uc9c0\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">reportWebVitals &#8211; \uc571\uc758 \uc131\ub2a5\uc744 \uce21\uc815<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">react\uc640 react-dom \ud328\ud0a4\uc9c0<\/h3>\n\n\n\n<h5 class=\"wp-block-heading\">react &#8211; \uc571\uc774 \ub3d9\uc791\ud558\ub294 \ud658\uacbd\uacfc \ubb34\uad00\ud558\uac8c \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uae30\ub2a5(\ucef4\ud3ec\ub10c\ud2b8, JSX, \ub9ac\uc561\ud2b8 \ud6c5 \ub4f1)<\/h5>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h5 class=\"wp-block-heading\">Virtual DOM<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>react-dom\/client &#8211; CSR(Client side Rendering) \ubc29\uc2dd<\/li>\n\n\n\n<li>react-dom\/server &#8211; SSR(Server side Rendering) \ubc29\uc2dd<\/li>\n\n\n\n<li>react-native &#8211; \uc571\uc774 \ub3d9\uc7a5\ud558\ub294 \ud50c\ub7ab\ud3fc\uc5d0 \uc885\uc18d\uc801\uc778 \ubc29\uc2dd<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">XML\uc774\ub098 HTML\ubb38\uc11c\ub294 element\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\uc73c\uba70, \uadf8\uac83\ub4e4\uc758 \ud2b8\ub9ac\uad6c\uc870(tree structure) \ub610\ub294 \uacc4\ub2e8 \uad6c\uc870(cascading tree)\ub85c \ub418\uc5b4 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">DOM &#8211; document object model<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h5 class=\"wp-block-heading\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc5d4\uc9c4<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>window &#8211; \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc758 \ud2b9\uc815 \uc6f9 \ud398\uc774\uc9c0\ub97c \uc758\ubbf8\ud558\ub294 \uac1d\uccb4. BOM(browser object model)<\/li>\n\n\n\n<li>document &#8211; HTML\ubb38\uc11c(\uc694\uc18c)\ub97c \uc758\ubbf8\ud558\ub294 \uac1d\uccb4. window.document\ub85c \uc811\uadfc<\/li>\n\n\n\n<li>document.head, document.body &#8211; head\uc640 body \uc694\uc18c\ub97c \uc758\ubbf8<\/li>\n\n\n\n<li>HTMLElement -&gt; Element -&gt; Node -&gt; EventTarget<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let element = document.createElement(localName &#91;, options]);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>let p = document.createElement(\"p\");    \/\/ &lt;p&gt;\uc694\uc18c \uc0dd\uc131\ndocument.body.appendChild(p);    \/\/ \ub80c\ub354\ub9c1<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h5 class=\"wp-block-heading\">\ub9ac\uc561\ud2b8\ub97c \uc0ac\uc6a9\ud558\ub294 \ud504\ub7f0\ud2b8\uc5d4\ub4dc \uac1c\ubc1c(\uac00\uc0c1DOM)<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react'\nimport ReactDOM from 'react-dom\/clinet'\n\nconst pVirtualDOM = React.createElement('p', null, 'Hello world!');\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\n\nroot.render(pVirtualDOM);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">root.render() \uba54\uc11c\ub4dc &#8211; \uac00\uc0c1 DOM\uc744 \ubb3c\ub9ac DOM\uc73c\ub85c \uc804\ud658\ud574 \uc900\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubb3c\ub9ac DOM\uc758 HTMLElement\uc758 id \ubb38\uc81c(\uc911\ubcf5 \ub4f1.) \ub54c\ubb38\uc5d0 \ub9ac\uc561\ud2b8\uc5d0\uc11c\ub294 \uac00\uc0c1 DOM\uc744 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">02-2 JSX \uad6c\ubb38 \uc774\ud574\ud558\uae30<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">React.createElement \ud638\ucd9c\uc758 \ubcf5\uc7a1\uc131 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud558\uc5ec JSX\uc0ac\uc6a9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubb38\ubc95\uc5d0 \uc0c8\ub85c\uc6b4 \ubb38\ubc95\uc744 \ucd94\uac00\ud55c \uc5b8\uc5b4 \ud655\uc7a5(language extension).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript + XML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import ReactDOM from 'react-dom\/client'\n\nconst rootVirtualDOM = (\n  &lt;ul&gt;\n    &lt;li&gt;\n      &lt;a href=\"http:\/\/www.google.com\" target=\"_blank\"&gt;\n        &lt;p&gt;go to Google&lt;\/p&gt;\n      &lt;\/a&gt;\n    &lt;\/li&gt;\n  &lt;\/ul&gt;\n)\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)\nroot.render(rootVirtualDOM)<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc911\uad04\ud638\ub97c \uc774\uc6a9\ud558\uc5ec \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub97c \uac10\uc2f8\ub294 \ud615\ud0dc\uc758 \ubb38\ubc95.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">return \uc5c6\uc774 \uac12\uc744 \ubc18\ud658\ud574\uc57c \ud568. =&gt; \ud45c\ud604\uc2dd(expression)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc2e4\ud589\ubb38(execution statement)\uc740 \ub123\uc744 \uc218 \uc5c6\uc74c.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;\n  {\/* string must be wrapped by Text *\/}\n&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ubc30\uc5f4 \uc0ac\uc6a9 \uac00\ub2a5. \ub2e8, \ubd80\ubaa8 \uc694\uc18c \uc5c6\uc774\ub294 \uc0ac\uc6a9 \ubd88\uac00.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">02-3 \ucef4\ud3ec\ub10c\ud2b8 \uc774\ud574\ud558\uae30<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ucef4\ud3ec\ub10c\ud2b8(Component) &#8211; \ud654\uba74UI\ub97c \ucc98\ub9ac\ud558\ub294 \ud074\ub798\uc2a4<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub9ac\uc561\ud2b8 \ud6c5(react hooks) &#8211; \ub2e8\uc21c\ud55c \ud568\uc218 \ud615\ud0dc\ub85c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uad6c\ud604\ud558\ub294 \uc0c8\ub85c\uc6b4 \uba54\ucee4\ub2c8\uc998<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">\ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\uc640 \uc0ac\uc6a9\uc790 \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 &#8211; \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \uc81c\uacf5\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8. (\uc608: &lt;h1&gt;&lt;\/h1&gt;)<\/h4>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">\uc0ac\uc6a9\uc790 \ucef4\ud3ec\ub10c\ud2b8 &#8211; \uac00\uc0c1 DOM \uc0dd\uc131 \ucf54\ub4dc\ub97c \uc0ac\uc6a9\uc790 \ucef4\ud3ec\ub10c\ud2b8 \ucabd\uc73c\ub85c \uc774\ub3d9\ud558\uc5ec \ucf54\ub4dc\ub97c \uac04\uacb0\ud558\uac8c \ud55c\ub2e4.<\/h4>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">\ud074\ub798\uc2a4 \ubc29\uc2dd \ucef4\ud3ec\ub10c\ud2b8 &#8211; ComponentClass&lt;P&gt;<\/h4>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h5 class=\"wp-block-heading\">\uc18d\uc131<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">\ud074\ub798\uc2a4\uc758 \uba64\ubc84 \ubcc0\uc218<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8 \ucabd\uc5d0 \uc815\ubcf4\ub97c \uc804\ub2ec\ud558\ub294 \ubaa9\uc801\uc73c\ub85c \uc0ac\uc6a9\ub428.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub9ac\uc561\ud2b8\uc5d0\uc11c\uc758 \uc18d\uc131\uc740 \uc0c1\ud0dc(state)\ub77c\uace0\ub3c4 \ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\uac12(\uc18d\uc131)\uc774 \ubcc0\ud558\uba74 \ud574\ub2f9 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\uc2dc \ub80c\ub354\ub9c1\ud558\uc5ec \ud654\uba74\uc5d0 \ubc18\uc601\ud55c\ub2e4.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {Component} from 'react'\n\nexport type ClassComponentProps = {\n  href: string\n  text: string\n}\nexport default class ClassComponent extends Component&lt;ClassComponentProps&gt; {\n  render() {\n    const {href, text} = this.props\n    return (\n      &lt;li&gt;\n        &lt;a href={href}&gt;\n          &lt;p&gt;{text}&lt;\/p&gt;\n        &lt;\/a&gt;\n      &lt;\/li&gt;\n    )\n  }\n}\n<\/code><\/pre>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">\ud568\uc218 \ubc29\uc2dd \ucef4\ud3ec\ub10c\ud2b8 &#8211; FunctionComponent&lt;P&gt;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\uc0c1\uc6a9\uad6c(boilerplate) \ucf54\ub4dc\uac00 \uc5c6\uae30 \ub54c\ubb38\uc5d0 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uac04\uacb0\ud558\uac8c \uad6c\ud604\ud560 \uc218 \uc788\ub2e4. \ud074\ub798\uc2a4 \ubc29\uc2dd\ubcf4\ub2e4 \uc120\ud638\ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uad6c\ud604\ubc29\ubc95 &#8211; function \ud0a4\uc6cc\ub4dc \ubc29\uc2dd\uacfc \ud654\uc0b4\ud45c(=&gt;) \ud568\uc218 \ubc29\uc2dd(\uc775\uba85\ud615 \ub78c\ub2e4?)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function App() {\n  return &lt;h1&gt;function component&lt;\/h1&gt;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>import type {FC} from 'react'\n\nexport type ArrowComponentProps = {\n  href: string\n  text: string\n}\nconst ArrowComponent: FC&lt;ArrowComponentProps&gt; = props =&gt; {\n  const {href, text} = props \/\/ \uc18d\uc131\uc744 this.props\uac00 \uc544\ub2c8\ub77c \ud568\uc218 \ub9e4\uac1c\ubcc0\uc218\ub85c \uc5bb\uc744 \uc218 \uc788\ub2e4.\n  return (\n    &lt;li&gt;\n      &lt;a href={href}&gt;\n        &lt;p&gt;{text}&lt;\/p&gt;\n      &lt;\/a&gt;\n    &lt;\/li&gt;\n  )\n}\nexport default ArrowComponent<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">* \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \ud0c0\uc785\uc740 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \ucef4\ud30c\uc77c\ud560 \ub54c\ub9cc \ud544\uc694\ud55c \uc815\ubcf4\uc774\ub2e4. \ud074\ub798\uc2a4\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \ucef4\ud30c\uc77c\ub418\uc5b4\ub3c4 \uadf8\ub300\ub85c \ub0a8\ub294\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import type {FC} from 'react' \/\/ FC\ub294 \ucef4\ud30c\uc77c\ub418\uba74 \uc0ac\ub77c\uc9c0\ub294 \uc815\ubcf4\uc774\ub2e4.\nimport {Component} from 'react'<\/code><\/pre>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">02-4 key\uc640 children \uc18d\uc131 \uc774\ud574\ud558\uae30<\/h2>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">key \uc18d\uc131 &#8211; \uc911\ubcf5\ub418\uc9c0 \uc54a\ub294 \ud0a4 \uac12 \uc124\uc815<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function App() {\n  const texts = &#91;&lt;p key=\"1\"&gt;hello&lt;\/p&gt;, &lt; key=\"2\"&gt;world&lt;\/p&gt;]\n  return &lt;div&gt;{texts}&lt;\/div&gt;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function App() {\n  const texts = &#91;'hello', 'world'].map((text, index) =&gt;\n    &lt;p key={index}&gt;{text}&lt;\/p&gt;)\n  return &lt;div&gt;{texts}&lt;\/div&gt;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">* map((item, index) =&gt; {} ) \uc73c\ub85c \uc0ac\uc6a9\uac00\ub2a5\ud55c \uba54\uc11c\ub4dc<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">children \uc18d\uc131 &#8211; \uc790\uc2dd \uc694\uc18c\ub97c \ud3ec\ud568\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c\ub9cc \uc0ac\uc6a9 \uac00\ub2a5<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function App() {\n  const texts = &#91;'hello', 'world'].map((text, index) =&gt;\n    &lt;p key={index} children={texts}\/&gt;)\n  return &lt;div children={texts} \/&gt;\n}\n  <\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>import type {FC, ReactNode} from 'react'\n\nexport type PProps = {\n  children?: ReactNode\n}\n\nconst P: FC&lt;PProps&gt; = props =&gt; {\n  const {children} = props\n  return &lt;p children={children} \/&gt;\n}<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">PropsWithChildren<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>import type {FC, ReactNode} from 'react'\n\nexport type PProps = {\n  children?: ReactNode | undefined\n}\nconst P: FC&lt;PProps&gt; = props =&gt; {\n  return &lt;p {...props} \/&gt;\n}\nexport default P<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">02-5 \uc774\ubca4\ud2b8 \uc18d\uc131 \uc774\ud574\ud558\uae30<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ubca4\ud2b8 &#8211; \uc0ac\uc6a9\uc790 \ud589\uc704\uac00 \uc77c\uc5b4\ub0a0 \ub54c<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Event<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>type : \uc774\ubca4\ud2b8\uc758 \uc774\ub984. \ub300\uc18c\ubb38\uc790 \uad6c\ubd84X<\/li>\n\n\n\n<li>isTrusted : \uc774\ubca4\ud2b8\uac00 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ubc1c\uc0dd\ud588\uc73c\uba74 true, \ud504\ub85c\uadf8\ub798\ubc0d\uc73c\ub85c \ubc1c\uc0dd\ud588\uc73c\uba74 false<\/li>\n\n\n\n<li>target : \uc774\ubca4\ud2b8\uac00 \ucc98\uc74c \ubc1c\uc0dd\ud55c HTML \uc694\uc18c<\/li>\n\n\n\n<li>currentTarget : \uc774\ubca4\ud2b8\uc758 \ud604\uc7ac \ub300\uc0c1, \uc774\ubca4\ud2b8 \ubc84\ube14\ub9c1 \uc911\uc5d0\uc11c \uc774\ubca4\ud2b8\uac00 \ud604\uc7ac \uc704\uce58\ud55c \uac1d\uccb4<\/li>\n\n\n\n<li>bubbles : \uc774\ubca4\ud2b8\uac00 DOM\uc744 \ud0c0\uace0 \ubc84\ube14\ub9c1\ub420\uc9c0 \uc5ec\ubd80<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">addEventListener &#8211; \uc774\ubca4\ud2b8\uc5d0 \uc774\ubca4\ud2b8 \ucc98\ub9ac\uae30\ub97c \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DOM_\uac1d\uccb4.addEventListener(\uc774\ubca4\ud2b8_\uc774\ub984: string, \ucf5c\ubc31_\ud568\uc218: (e: Event) => void)<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">on-\uc774\ubca4\ud2b8\uba85 \uba54\uc11c\ub4dc &#8211; \uac00\uc7a5 \ub9c8\uc9c0\ub9c9\uc5d0 \uc124\uc815\ub41c \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud55c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">\ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\uc758 \uc774\ubca4\ud2b8 \uc18d\uc131<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc18c\ubb38\uc790\ub85c \uc2dc\uc791\ud558\ub294 \uce74\uba5c \ud45c\uae30\ubc95\uc744 \uc0ac\uc6a9 (onClick, onMouseEnter)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ucf5c\ubc31\ud568\uc218\uc758 \ub9e4\uac1c\ubcc0\uc218 e : BaseSyntheticEvent \ub97c \uc0c1\uc18d\ubc1b\uc740 SyntheticEvent \ud0c0\uc785<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>interface BaseSyntheticEvent&lt;E = object, C = any, T = any> {\n  nativeEvent: E; \/\/ \ubb3c\ub9ac DOM\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 Event \ud0c0\uc785\n  currentTarget: C; \/\/ \uc774\ubca4\ud2b8\ub97c \uc218\uc2e0\ud55c DOM \uac1d\uccb4\n  target: T; \/\/ \uc774\ubca4\ud2b8\ub97c \ucc98\uc74c \ubc1c\uc0dd\uc2dc\ud0a8 DOM \uac1d\uccb4\n  preventDefault(): void; \/\/ \ube0c\ub77c\uc6b0\uc800\uc758 \uae30\ubcf8 \ub3d9\uc791\uc744 \uc911\uc9c0\n  stopPropagation(): void; \/\/ \uc774\ubca4\ud2b8 \uc804\ud30c\ub97c \uc911\uc9c0 (event stop propagation)\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">03 \ucef4\ud3ec\ub10c\ud2b8 CSS \uc2a4\ud0c0\uc77c\ub9c1<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">[&#8230;\uc740 \uc0dd\ub7b5. \uad73\uc774 \ud14c\uc77c\uc708\ub4dc\uae4c\uc9c0 \ucc45\uc5d0\uc11c??]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>02-1 \uac00\uc0c1 DOM \uc774\ud574\ud558\uae30 \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uad6c\uc131\ud558\ub294 3\uc694\uc18c &#8211; \uac00\uc0c1 DOM(Virtual DOM), JSX(JavaScript XML), \ucef4\ud3ec\ub10c\ud2b8(Component) React.StrictMode &#8211; \ucf54\ub4dc\uac00 \uc798\ubabb\ub418\uc5c8\ub294\uc9c0 \ud310\ub2e8\ud558\uc5ec \uc624\ub958 \uba54\uc138\uc9c0\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8 reportWebVitals &#8211; \uc571\uc758 \uc131\ub2a5\uc744 \uce21\uc815 react\uc640 react-dom \ud328\ud0a4\uc9c0 react &#8211; \uc571\uc774 \ub3d9\uc791\ud558\ub294 \ud658\uacbd\uacfc \ubb34\uad00\ud558\uac8c \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uae30\ub2a5(\ucef4\ud3ec\ub10c\ud2b8, JSX, \ub9ac\uc561\ud2b8 \ud6c5 \ub4f1) Virtual DOM XML\uc774\ub098 HTML\ubb38\uc11c\ub294 element\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\uc73c\uba70, \uadf8\uac83\ub4e4\uc758 \ud2b8\ub9ac\uad6c\uc870(tree structure) \ub610\ub294 \uacc4\ub2e8 \uad6c\uc870(cascading tree)\ub85c \ub418\uc5b4&#8230; <a href=\"https:\/\/reasty.net\/?p=580\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[63],"tags":[64,65],"class_list":["post-580","post","type-post","status-publish","format-standard","hentry","category-react","tag-do-it----with-","tag-65"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"02-1 \uac00\uc0c1 DOM \uc774\ud574\ud558\uae30 \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uad6c\uc131\ud558\ub294 3\uc694\uc18c - \uac00\uc0c1 DOM(Virtual DOM), JSX(JavaScript XML), \ucef4\ud3ec\ub10c\ud2b8(Component) React.StrictMode - \ucf54\ub4dc\uac00 \uc798\ubabb\ub418\uc5c8\ub294\uc9c0 \ud310\ub2e8\ud558\uc5ec \uc624\ub958 \uba54\uc138\uc9c0\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8 reportWebVitals - \uc571\uc758 \uc131\ub2a5\uc744 \uce21\uc815 react\uc640 react-dom \ud328\ud0a4\uc9c0 react - \uc571\uc774 \ub3d9\uc791\ud558\ub294 \ud658\uacbd\uacfc \ubb34\uad00\ud558\uac8c \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uae30\ub2a5(\ucef4\ud3ec\ub10c\ud2b8, JSX, \ub9ac\uc561\ud2b8 \ud6c5 \ub4f1) Virtual DOM react-dom\/client - CSR(Client side Rendering) \ubc29\uc2dd react-dom\/server -\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Reasty\"\/>\n\t<meta name=\"google-site-verification\" content=\"jcPlHP_CH1l7BsKhhCYbJmc3sJMEMI_aCypCiUfTjdw\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/reasty.net\/?p=580\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"ko_KR\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Reasty&#039;s Programming Memories - \ub808\uc2a4\ud2f0\uc758 \ud504\ub85c\uadf8\ub798\ubc0d \ub178\ud558\uc6b0 \ub178\uc6e8\uc5b4\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"02. \ub9ac\uc561\ud2b8 \ub3d9\uc791 \uc6d0\ub9ac - Reasty&#039;s Programming Memories\" \/>\n\t\t<meta property=\"og:description\" content=\"02-1 \uac00\uc0c1 DOM \uc774\ud574\ud558\uae30 \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uad6c\uc131\ud558\ub294 3\uc694\uc18c - \uac00\uc0c1 DOM(Virtual DOM), JSX(JavaScript XML), \ucef4\ud3ec\ub10c\ud2b8(Component) React.StrictMode - \ucf54\ub4dc\uac00 \uc798\ubabb\ub418\uc5c8\ub294\uc9c0 \ud310\ub2e8\ud558\uc5ec \uc624\ub958 \uba54\uc138\uc9c0\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8 reportWebVitals - \uc571\uc758 \uc131\ub2a5\uc744 \uce21\uc815 react\uc640 react-dom \ud328\ud0a4\uc9c0 react - \uc571\uc774 \ub3d9\uc791\ud558\ub294 \ud658\uacbd\uacfc \ubb34\uad00\ud558\uac8c \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uae30\ub2a5(\ucef4\ud3ec\ub10c\ud2b8, JSX, \ub9ac\uc561\ud2b8 \ud6c5 \ub4f1) Virtual DOM react-dom\/client - CSR(Client side Rendering) \ubc29\uc2dd react-dom\/server -\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/reasty.net\/?p=580\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2024-11-21T00:06:14+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2024-12-26T23:23:31+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/reastykim\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@reastykim\" \/>\n\t\t<meta name=\"twitter:title\" content=\"02. \ub9ac\uc561\ud2b8 \ub3d9\uc791 \uc6d0\ub9ac - Reasty&#039;s Programming Memories\" \/>\n\t\t<meta name=\"twitter:description\" content=\"02-1 \uac00\uc0c1 DOM \uc774\ud574\ud558\uae30 \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uad6c\uc131\ud558\ub294 3\uc694\uc18c - \uac00\uc0c1 DOM(Virtual DOM), JSX(JavaScript XML), \ucef4\ud3ec\ub10c\ud2b8(Component) React.StrictMode - \ucf54\ub4dc\uac00 \uc798\ubabb\ub418\uc5c8\ub294\uc9c0 \ud310\ub2e8\ud558\uc5ec \uc624\ub958 \uba54\uc138\uc9c0\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8 reportWebVitals - \uc571\uc758 \uc131\ub2a5\uc744 \uce21\uc815 react\uc640 react-dom \ud328\ud0a4\uc9c0 react - \uc571\uc774 \ub3d9\uc791\ud558\ub294 \ud658\uacbd\uacfc \ubb34\uad00\ud558\uac8c \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uae30\ub2a5(\ucef4\ud3ec\ub10c\ud2b8, JSX, \ub9ac\uc561\ud2b8 \ud6c5 \ub4f1) Virtual DOM react-dom\/client - CSR(Client side Rendering) \ubc29\uc2dd react-dom\/server -\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@reastykim\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=580#blogposting\",\"name\":\"02. \\ub9ac\\uc561\\ud2b8 \\ub3d9\\uc791 \\uc6d0\\ub9ac - Reasty's Programming Memories\",\"headline\":\"02. \\ub9ac\\uc561\\ud2b8 \\ub3d9\\uc791 \\uc6d0\\ub9ac\",\"author\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/?author=1#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=580#articleImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5b441925fb88cfa3ff962d797c048671a3ef20a01d85a4de1feadc32d00b2d89?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Reasty\"},\"datePublished\":\"2024-11-21T09:06:14+09:00\",\"dateModified\":\"2024-12-27T08:23:31+09:00\",\"inLanguage\":\"ko-KR\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=580#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=580#webpage\"},\"articleSection\":\"React, Do it! \\ub9ac\\uc561\\ud2b8\\ub85c \\uc6f9\\uc571 \\ub9cc\\ub4e4\\uae30 with \\ud0c0\\uc785\\uc2a4\\ud06c\\ub9bd\\ud2b8, \\ub9ac\\uc561\\ud2b8\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=580#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net#listItem\",\"position\":1,\"name\":\"\\ud648\",\"item\":\"https:\\\/\\\/reasty.net\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?cat=9#listItem\",\"name\":\"Study\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?cat=9#listItem\",\"position\":2,\"name\":\"Study\",\"item\":\"https:\\\/\\\/reasty.net\\\/?cat=9\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?cat=63#listItem\",\"name\":\"React\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net#listItem\",\"name\":\"\\ud648\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?cat=63#listItem\",\"position\":3,\"name\":\"React\",\"item\":\"https:\\\/\\\/reasty.net\\\/?cat=63\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=580#listItem\",\"name\":\"02. \\ub9ac\\uc561\\ud2b8 \\ub3d9\\uc791 \\uc6d0\\ub9ac\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?cat=9#listItem\",\"name\":\"Study\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=580#listItem\",\"position\":4,\"name\":\"02. \\ub9ac\\uc561\\ud2b8 \\ub3d9\\uc791 \\uc6d0\\ub9ac\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?cat=63#listItem\",\"name\":\"React\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/reasty.net\\\/#person\",\"name\":\"Reasty\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=580#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5b441925fb88cfa3ff962d797c048671a3ef20a01d85a4de1feadc32d00b2d89?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Reasty\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?author=1#author\",\"url\":\"https:\\\/\\\/reasty.net\\\/?author=1\",\"name\":\"Reasty\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=580#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5b441925fb88cfa3ff962d797c048671a3ef20a01d85a4de1feadc32d00b2d89?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Reasty\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=580#webpage\",\"url\":\"https:\\\/\\\/reasty.net\\\/?p=580\",\"name\":\"02. \\ub9ac\\uc561\\ud2b8 \\ub3d9\\uc791 \\uc6d0\\ub9ac - Reasty's Programming Memories\",\"description\":\"02-1 \\uac00\\uc0c1 DOM \\uc774\\ud574\\ud558\\uae30 \\ub9ac\\uc561\\ud2b8 \\ud504\\ub808\\uc784\\uc6cc\\ud06c\\ub97c \\uad6c\\uc131\\ud558\\ub294 3\\uc694\\uc18c - \\uac00\\uc0c1 DOM(Virtual DOM), JSX(JavaScript XML), \\ucef4\\ud3ec\\ub10c\\ud2b8(Component) React.StrictMode - \\ucf54\\ub4dc\\uac00 \\uc798\\ubabb\\ub418\\uc5c8\\ub294\\uc9c0 \\ud310\\ub2e8\\ud558\\uc5ec \\uc624\\ub958 \\uba54\\uc138\\uc9c0\\ub97c \\ubcf4\\uc5ec\\uc8fc\\ub294 \\ucef4\\ud3ec\\ub10c\\ud2b8 reportWebVitals - \\uc571\\uc758 \\uc131\\ub2a5\\uc744 \\uce21\\uc815 react\\uc640 react-dom \\ud328\\ud0a4\\uc9c0 react - \\uc571\\uc774 \\ub3d9\\uc791\\ud558\\ub294 \\ud658\\uacbd\\uacfc \\ubb34\\uad00\\ud558\\uac8c \\uacf5\\ud1b5\\uc73c\\ub85c \\uc0ac\\uc6a9\\ud558\\ub294 \\uae30\\ub2a5(\\ucef4\\ud3ec\\ub10c\\ud2b8, JSX, \\ub9ac\\uc561\\ud2b8 \\ud6c5 \\ub4f1) Virtual DOM react-dom\\\/client - CSR(Client side Rendering) \\ubc29\\uc2dd react-dom\\\/server -\",\"inLanguage\":\"ko-KR\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=580#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/?author=1#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/?author=1#author\"},\"datePublished\":\"2024-11-21T09:06:14+09:00\",\"dateModified\":\"2024-12-27T08:23:31+09:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/reasty.net\\\/#website\",\"url\":\"https:\\\/\\\/reasty.net\\\/\",\"name\":\"Reasty's Programming Memories\",\"description\":\"\\ub808\\uc2a4\\ud2f0\\uc758 \\ud504\\ub85c\\uadf8\\ub798\\ubc0d \\ub178\\ud558\\uc6b0 \\ub178\\uc6e8\\uc5b4\",\"inLanguage\":\"ko-KR\",\"publisher\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"02. \ub9ac\uc561\ud2b8 \ub3d9\uc791 \uc6d0\ub9ac - Reasty's Programming Memories","description":"02-1 \uac00\uc0c1 DOM \uc774\ud574\ud558\uae30 \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uad6c\uc131\ud558\ub294 3\uc694\uc18c - \uac00\uc0c1 DOM(Virtual DOM), JSX(JavaScript XML), \ucef4\ud3ec\ub10c\ud2b8(Component) React.StrictMode - \ucf54\ub4dc\uac00 \uc798\ubabb\ub418\uc5c8\ub294\uc9c0 \ud310\ub2e8\ud558\uc5ec \uc624\ub958 \uba54\uc138\uc9c0\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8 reportWebVitals - \uc571\uc758 \uc131\ub2a5\uc744 \uce21\uc815 react\uc640 react-dom \ud328\ud0a4\uc9c0 react - \uc571\uc774 \ub3d9\uc791\ud558\ub294 \ud658\uacbd\uacfc \ubb34\uad00\ud558\uac8c \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uae30\ub2a5(\ucef4\ud3ec\ub10c\ud2b8, JSX, \ub9ac\uc561\ud2b8 \ud6c5 \ub4f1) Virtual DOM react-dom\/client - CSR(Client side Rendering) \ubc29\uc2dd react-dom\/server -","canonical_url":"https:\/\/reasty.net\/?p=580","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"jcPlHP_CH1l7BsKhhCYbJmc3sJMEMI_aCypCiUfTjdw","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/reasty.net\/?p=580#blogposting","name":"02. \ub9ac\uc561\ud2b8 \ub3d9\uc791 \uc6d0\ub9ac - Reasty's Programming Memories","headline":"02. \ub9ac\uc561\ud2b8 \ub3d9\uc791 \uc6d0\ub9ac","author":{"@id":"https:\/\/reasty.net\/?author=1#author"},"publisher":{"@id":"https:\/\/reasty.net\/#person"},"image":{"@type":"ImageObject","@id":"https:\/\/reasty.net\/?p=580#articleImage","url":"https:\/\/secure.gravatar.com\/avatar\/5b441925fb88cfa3ff962d797c048671a3ef20a01d85a4de1feadc32d00b2d89?s=96&d=mm&r=g","width":96,"height":96,"caption":"Reasty"},"datePublished":"2024-11-21T09:06:14+09:00","dateModified":"2024-12-27T08:23:31+09:00","inLanguage":"ko-KR","mainEntityOfPage":{"@id":"https:\/\/reasty.net\/?p=580#webpage"},"isPartOf":{"@id":"https:\/\/reasty.net\/?p=580#webpage"},"articleSection":"React, Do it! \ub9ac\uc561\ud2b8\ub85c \uc6f9\uc571 \ub9cc\ub4e4\uae30 with \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8, \ub9ac\uc561\ud2b8"},{"@type":"BreadcrumbList","@id":"https:\/\/reasty.net\/?p=580#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/reasty.net#listItem","position":1,"name":"\ud648","item":"https:\/\/reasty.net","nextItem":{"@type":"ListItem","@id":"https:\/\/reasty.net\/?cat=9#listItem","name":"Study"}},{"@type":"ListItem","@id":"https:\/\/reasty.net\/?cat=9#listItem","position":2,"name":"Study","item":"https:\/\/reasty.net\/?cat=9","nextItem":{"@type":"ListItem","@id":"https:\/\/reasty.net\/?cat=63#listItem","name":"React"},"previousItem":{"@type":"ListItem","@id":"https:\/\/reasty.net#listItem","name":"\ud648"}},{"@type":"ListItem","@id":"https:\/\/reasty.net\/?cat=63#listItem","position":3,"name":"React","item":"https:\/\/reasty.net\/?cat=63","nextItem":{"@type":"ListItem","@id":"https:\/\/reasty.net\/?p=580#listItem","name":"02. \ub9ac\uc561\ud2b8 \ub3d9\uc791 \uc6d0\ub9ac"},"previousItem":{"@type":"ListItem","@id":"https:\/\/reasty.net\/?cat=9#listItem","name":"Study"}},{"@type":"ListItem","@id":"https:\/\/reasty.net\/?p=580#listItem","position":4,"name":"02. \ub9ac\uc561\ud2b8 \ub3d9\uc791 \uc6d0\ub9ac","previousItem":{"@type":"ListItem","@id":"https:\/\/reasty.net\/?cat=63#listItem","name":"React"}}]},{"@type":"Person","@id":"https:\/\/reasty.net\/#person","name":"Reasty","image":{"@type":"ImageObject","@id":"https:\/\/reasty.net\/?p=580#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/5b441925fb88cfa3ff962d797c048671a3ef20a01d85a4de1feadc32d00b2d89?s=96&d=mm&r=g","width":96,"height":96,"caption":"Reasty"}},{"@type":"Person","@id":"https:\/\/reasty.net\/?author=1#author","url":"https:\/\/reasty.net\/?author=1","name":"Reasty","image":{"@type":"ImageObject","@id":"https:\/\/reasty.net\/?p=580#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/5b441925fb88cfa3ff962d797c048671a3ef20a01d85a4de1feadc32d00b2d89?s=96&d=mm&r=g","width":96,"height":96,"caption":"Reasty"}},{"@type":"WebPage","@id":"https:\/\/reasty.net\/?p=580#webpage","url":"https:\/\/reasty.net\/?p=580","name":"02. \ub9ac\uc561\ud2b8 \ub3d9\uc791 \uc6d0\ub9ac - Reasty's Programming Memories","description":"02-1 \uac00\uc0c1 DOM \uc774\ud574\ud558\uae30 \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uad6c\uc131\ud558\ub294 3\uc694\uc18c - \uac00\uc0c1 DOM(Virtual DOM), JSX(JavaScript XML), \ucef4\ud3ec\ub10c\ud2b8(Component) React.StrictMode - \ucf54\ub4dc\uac00 \uc798\ubabb\ub418\uc5c8\ub294\uc9c0 \ud310\ub2e8\ud558\uc5ec \uc624\ub958 \uba54\uc138\uc9c0\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8 reportWebVitals - \uc571\uc758 \uc131\ub2a5\uc744 \uce21\uc815 react\uc640 react-dom \ud328\ud0a4\uc9c0 react - \uc571\uc774 \ub3d9\uc791\ud558\ub294 \ud658\uacbd\uacfc \ubb34\uad00\ud558\uac8c \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uae30\ub2a5(\ucef4\ud3ec\ub10c\ud2b8, JSX, \ub9ac\uc561\ud2b8 \ud6c5 \ub4f1) Virtual DOM react-dom\/client - CSR(Client side Rendering) \ubc29\uc2dd react-dom\/server -","inLanguage":"ko-KR","isPartOf":{"@id":"https:\/\/reasty.net\/#website"},"breadcrumb":{"@id":"https:\/\/reasty.net\/?p=580#breadcrumblist"},"author":{"@id":"https:\/\/reasty.net\/?author=1#author"},"creator":{"@id":"https:\/\/reasty.net\/?author=1#author"},"datePublished":"2024-11-21T09:06:14+09:00","dateModified":"2024-12-27T08:23:31+09:00"},{"@type":"WebSite","@id":"https:\/\/reasty.net\/#website","url":"https:\/\/reasty.net\/","name":"Reasty's Programming Memories","description":"\ub808\uc2a4\ud2f0\uc758 \ud504\ub85c\uadf8\ub798\ubc0d \ub178\ud558\uc6b0 \ub178\uc6e8\uc5b4","inLanguage":"ko-KR","publisher":{"@id":"https:\/\/reasty.net\/#person"}}]},"og:locale":"ko_KR","og:site_name":"Reasty's Programming Memories - \ub808\uc2a4\ud2f0\uc758 \ud504\ub85c\uadf8\ub798\ubc0d \ub178\ud558\uc6b0 \ub178\uc6e8\uc5b4","og:type":"article","og:title":"02. \ub9ac\uc561\ud2b8 \ub3d9\uc791 \uc6d0\ub9ac - Reasty's Programming Memories","og:description":"02-1 \uac00\uc0c1 DOM \uc774\ud574\ud558\uae30 \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uad6c\uc131\ud558\ub294 3\uc694\uc18c - \uac00\uc0c1 DOM(Virtual DOM), JSX(JavaScript XML), \ucef4\ud3ec\ub10c\ud2b8(Component) React.StrictMode - \ucf54\ub4dc\uac00 \uc798\ubabb\ub418\uc5c8\ub294\uc9c0 \ud310\ub2e8\ud558\uc5ec \uc624\ub958 \uba54\uc138\uc9c0\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8 reportWebVitals - \uc571\uc758 \uc131\ub2a5\uc744 \uce21\uc815 react\uc640 react-dom \ud328\ud0a4\uc9c0 react - \uc571\uc774 \ub3d9\uc791\ud558\ub294 \ud658\uacbd\uacfc \ubb34\uad00\ud558\uac8c \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uae30\ub2a5(\ucef4\ud3ec\ub10c\ud2b8, JSX, \ub9ac\uc561\ud2b8 \ud6c5 \ub4f1) Virtual DOM react-dom\/client - CSR(Client side Rendering) \ubc29\uc2dd react-dom\/server -","og:url":"https:\/\/reasty.net\/?p=580","article:published_time":"2024-11-21T00:06:14+00:00","article:modified_time":"2024-12-26T23:23:31+00:00","article:publisher":"https:\/\/facebook.com\/reastykim","twitter:card":"summary_large_image","twitter:site":"@reastykim","twitter:title":"02. \ub9ac\uc561\ud2b8 \ub3d9\uc791 \uc6d0\ub9ac - Reasty's Programming Memories","twitter:description":"02-1 \uac00\uc0c1 DOM \uc774\ud574\ud558\uae30 \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uad6c\uc131\ud558\ub294 3\uc694\uc18c - \uac00\uc0c1 DOM(Virtual DOM), JSX(JavaScript XML), \ucef4\ud3ec\ub10c\ud2b8(Component) React.StrictMode - \ucf54\ub4dc\uac00 \uc798\ubabb\ub418\uc5c8\ub294\uc9c0 \ud310\ub2e8\ud558\uc5ec \uc624\ub958 \uba54\uc138\uc9c0\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8 reportWebVitals - \uc571\uc758 \uc131\ub2a5\uc744 \uce21\uc815 react\uc640 react-dom \ud328\ud0a4\uc9c0 react - \uc571\uc774 \ub3d9\uc791\ud558\ub294 \ud658\uacbd\uacfc \ubb34\uad00\ud558\uac8c \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \uae30\ub2a5(\ucef4\ud3ec\ub10c\ud2b8, JSX, \ub9ac\uc561\ud2b8 \ud6c5 \ub4f1) Virtual DOM react-dom\/client - CSR(Client side Rendering) \ubc29\uc2dd react-dom\/server -","twitter:creator":"@reastykim"},"aioseo_meta_data":{"post_id":"580","title":null,"description":null,"keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2024-11-21 00:06:34","updated":"2025-06-04 03:16:57","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/reasty.net\" title=\"\ud648\">\ud648<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/reasty.net\/?cat=9\" title=\"Study\">Study<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/reasty.net\/?cat=63\" title=\"React\">React<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t02. \ub9ac\uc561\ud2b8 \ub3d9\uc791 \uc6d0\ub9ac\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"\ud648","link":"https:\/\/reasty.net"},{"label":"Study","link":"https:\/\/reasty.net\/?cat=9"},{"label":"React","link":"https:\/\/reasty.net\/?cat=63"},{"label":"02. \ub9ac\uc561\ud2b8 \ub3d9\uc791 \uc6d0\ub9ac","link":"https:\/\/reasty.net\/?p=580"}],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/reasty.net\/index.php?rest_route=\/wp\/v2\/posts\/580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reasty.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reasty.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reasty.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reasty.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=580"}],"version-history":[{"count":9,"href":"https:\/\/reasty.net\/index.php?rest_route=\/wp\/v2\/posts\/580\/revisions"}],"predecessor-version":[{"id":599,"href":"https:\/\/reasty.net\/index.php?rest_route=\/wp\/v2\/posts\/580\/revisions\/599"}],"wp:attachment":[{"href":"https:\/\/reasty.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reasty.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reasty.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}