{"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
\n

02-1 \uac00\uc0c1 DOM \uc774\ud574\ud558\uae30<\/h2>\n\n\n\n

\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)<\/p>\n\n\n\n

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<\/p>\n\n\n\n

reportWebVitals – \uc571\uc758 \uc131\ub2a5\uc744 \uce21\uc815<\/p>\n\n\n\n

\n

react\uc640 react-dom \ud328\ud0a4\uc9c0<\/h3>\n\n\n\n

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)<\/h5>\n\n\n\n
\n
Virtual DOM<\/h5>\n\n\n\n
    \n
  • react-dom\/client – CSR(Client side Rendering) \ubc29\uc2dd<\/li>\n\n\n\n
  • react-dom\/server – SSR(Server side Rendering) \ubc29\uc2dd<\/li>\n\n\n\n
  • react-native – \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

    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

    DOM – document object model<\/p>\n\n\n\n

    \n
    \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc5d4\uc9c4<\/h5>\n\n\n\n
      \n
    • window – \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
    • document – HTML\ubb38\uc11c(\uc694\uc18c)\ub97c \uc758\ubbf8\ud558\ub294 \uac1d\uccb4. window.document\ub85c \uc811\uadfc<\/li>\n\n\n\n
    • document.head, document.body – head\uc640 body \uc694\uc18c\ub97c \uc758\ubbf8<\/li>\n\n\n\n
    • HTMLElement -> Element -> Node -> EventTarget<\/li>\n<\/ul>\n\n\n\n
      let element = document.createElement(localName [, options]);<\/code><\/pre>\n\n\n\n
      let p = document.createElement(\"p\");    \/\/ <p>\uc694\uc18c \uc0dd\uc131\ndocument.body.appendChild(p);    \/\/ \ub80c\ub354\ub9c1<\/code><\/pre>\n<\/div><\/div>\n\n\n\n
      \n
      \ub9ac\uc561\ud2b8\ub97c \uc0ac\uc6a9\ud558\ub294 \ud504\ub7f0\ud2b8\uc5d4\ub4dc \uac1c\ubc1c(\uac00\uc0c1DOM)<\/h5>\n\n\n\n
      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
      root.render() \uba54\uc11c\ub4dc – \uac00\uc0c1 DOM\uc744 \ubb3c\ub9ac DOM\uc73c\ub85c \uc804\ud658\ud574 \uc900\ub2e4.<\/p>\n\n\n\n
      \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
      \n
      02-2 JSX \uad6c\ubb38 \uc774\ud574\ud558\uae30<\/h2>\n\n\n\n
      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
      \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
      JavaScript + XML<\/p>\n\n\n\n
      import ReactDOM from 'react-dom\/client'\n\nconst rootVirtualDOM = (\n  <ul>\n    <li>\n      <a href=\"http:\/\/www.google.com\" target=\"_blank\">\n        <p>go to Google<\/p>\n      <\/a>\n    <\/li>\n  <\/ul>\n)\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)\nroot.render(rootVirtualDOM)<\/code><\/pre>\n\n\n\n
      \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
      return \uc5c6\uc774 \uac12\uc744 \ubc18\ud658\ud574\uc57c \ud568. => \ud45c\ud604\uc2dd(expression)<\/p>\n\n\n\n
      \uc2e4\ud589\ubb38(execution statement)\uc740 \ub123\uc744 \uc218 \uc5c6\uc74c.<\/p>\n\n\n\n
      <p>\n  {\/* string must be wrapped by Text *\/}\n<\/p><\/code><\/pre>\n\n\n\n
      \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
      \n
      02-3 \ucef4\ud3ec\ub10c\ud2b8 \uc774\ud574\ud558\uae30<\/h2>\n\n\n\n
      \ucef4\ud3ec\ub10c\ud2b8(Component) – \ud654\uba74UI\ub97c \ucc98\ub9ac\ud558\ub294 \ud074\ub798\uc2a4<\/p>\n\n\n\n
      \ub9ac\uc561\ud2b8 \ud6c5(react hooks) – \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
      \n
      \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\uc640 \uc0ac\uc6a9\uc790 \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n\n\n\n
      \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 – \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \uc81c\uacf5\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8. (\uc608: <h1><\/h1>)<\/h4>\n\n\n\n
      \n
      \uc0ac\uc6a9\uc790 \ucef4\ud3ec\ub10c\ud2b8 – \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
      \n
      \ud074\ub798\uc2a4 \ubc29\uc2dd \ucef4\ud3ec\ub10c\ud2b8 – ComponentClass<P><\/h4>\n\n\n\n
      \n
      \uc18d\uc131<\/h5>\n\n\n\n
      \ud074\ub798\uc2a4\uc758 \uba64\ubc84 \ubcc0\uc218<\/p>\n\n\n\n
      \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
      \ub9ac\uc561\ud2b8\uc5d0\uc11c\uc758 \uc18d\uc131\uc740 \uc0c1\ud0dc(state)\ub77c\uace0\ub3c4 \ud55c\ub2e4.<\/p>\n\n\n\n
      \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
      import {Component} from 'react'\n\nexport type ClassComponentProps = {\n  href: string\n  text: string\n}\nexport default class ClassComponent extends Component<ClassComponentProps> {\n  render() {\n    const {href, text} = this.props\n    return (\n      <li>\n        <a href={href}>\n          <p>{text}<\/p>\n        <\/a>\n      <\/li>\n    )\n  }\n}\n<\/code><\/pre>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
      \n
      \ud568\uc218 \ubc29\uc2dd \ucef4\ud3ec\ub10c\ud2b8 – FunctionComponent<P><\/h4>\n\n\n\n
      \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
      \uad6c\ud604\ubc29\ubc95 – function \ud0a4\uc6cc\ub4dc \ubc29\uc2dd\uacfc \ud654\uc0b4\ud45c(=>) \ud568\uc218 \ubc29\uc2dd(\uc775\uba85\ud615 \ub78c\ub2e4?)<\/p>\n\n\n\n
      export default function App() {\n  return <h1>function component<\/h1>\n}<\/code><\/pre>\n\n\n\n
      import type {FC} from 'react'\n\nexport type ArrowComponentProps = {\n  href: string\n  text: string\n}\nconst ArrowComponent: FC<ArrowComponentProps> = props => {\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    <li>\n      <a href={href}>\n        <p>{text}<\/p>\n      <\/a>\n    <\/li>\n  )\n}\nexport default ArrowComponent<\/code><\/pre>\n\n\n\n
      * \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
      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
      \n
      02-4 key\uc640 children \uc18d\uc131 \uc774\ud574\ud558\uae30<\/h2>\n\n\n\n
      \n
      key \uc18d\uc131 – \uc911\ubcf5\ub418\uc9c0 \uc54a\ub294 \ud0a4 \uac12 \uc124\uc815<\/h3>\n\n\n\n
      export default function App() {\n  const texts = [<p key=\"1\">hello<\/p>, < key=\"2\">world<\/p>]\n  return <div>{texts}<\/div>\n}<\/code><\/pre>\n\n\n\n
      export default function App() {\n  const texts = ['hello', 'world'].map((text, index) =>\n    <p key={index}>{text}<\/p>)\n  return <div>{texts}<\/div>\n}<\/code><\/pre>\n\n\n\n
      * map((item, index) => {} ) \uc73c\ub85c \uc0ac\uc6a9\uac00\ub2a5\ud55c \uba54\uc11c\ub4dc<\/p>\n<\/div><\/div>\n\n\n\n
      \n
      children \uc18d\uc131 – \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
      export default function App() {\n  const texts = ['hello', 'world'].map((text, index) =>\n    <p key={index} children={texts}\/>)\n  return <div children={texts} \/>\n}\n  <\/code><\/pre>\n\n\n\n
      import type {FC, ReactNode} from 'react'\n\nexport type PProps = {\n  children?: ReactNode\n}\n\nconst P: FC<PProps> = props => {\n  const {children} = props\n  return <p children={children} \/>\n}<\/code><\/pre>\n<\/div><\/div>\n\n\n\n
      PropsWithChildren<\/h4>\n\n\n\n
      import type {FC, ReactNode} from 'react'\n\nexport type PProps = {\n  children?: ReactNode | undefined\n}\nconst P: FC<PProps> = props => {\n  return <p {...props} \/>\n}\nexport default P<\/code><\/pre>\n<\/div><\/div>\n\n\n\n
      \n
      02-5 \uc774\ubca4\ud2b8 \uc18d\uc131 \uc774\ud574\ud558\uae30<\/h2>\n\n\n\n
      \uc774\ubca4\ud2b8 – \uc0ac\uc6a9\uc790 \ud589\uc704\uac00 \uc77c\uc5b4\ub0a0 \ub54c<\/p>\n\n\n\n
      Event<\/p>\n\n\n\n