{"id":210,"date":"2026-06-26T13:33:31","date_gmt":"2026-06-26T13:33:31","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=210"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"composition","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/composition\/","title":{"rendered":"composition"},"content":{"rendered":"

1. \uae30\ucd08\uc601\uc0c1<\/strong><\/h2>\n

2. \uc2ec\ud654\uc601\uc0c1<\/strong><\/h2>\n

3. Composition? (\ucef4\ud3ec\uc9c0\uc158?)<\/h2>\n
\n

Nested Component \ucef4\ud3ec\ub10c\ud2b8 \ub77c\uace0\ub3c4 \ud558\uace0 \uc911\ucca9 \ucef4\ud3ec\ub10c\ud2b8\ub77c\uace0\ub3c4 \ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n

\ucef4\ud3ec\ub10c\ud2b8\ub97c \uc911\ucca9\ud558\ub294 \uac83\uc744 \ub9d0\ud569\ub2c8\ub2e4.<\/p>\n

\ub9ac\uc561\ud2b8 \uc571\uc740 \uc218\ub9ce\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uac00\uc9c0\uac8c \ub429\ub2c8\ub2e4.
\n \ucef4\ud3ec\ub10c\ud2b8\uac04\uc758 \uc8fc\uace0\ubc1b\ub294 \ub370\uc774\ud130 \ubfd0\ub9cc \uc544\ub2c8\ub77c \ubc15\uc2a4\ub098 \ucee8\ud14c\uc774\ub108\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uc2a4\ud0c0\uc77c\ucf54\ub4dc\uc758 \uc911\ubcf5\uae4c\uc9c0\ub3c4 \ucd5c\uc18c\ud654 \ud558\ub824\uba74 props \ub9cc\uc73c\ub85c\ub294 \ud55c\uacc4\uac00 \uc788\ub294\ub370\uc694.<\/p>\n

\uc774\ub54c \uc0ac\uc6a9\ud560\uc218 \uc788\ub294\uac83\uc774 composition(\ud569\uc131) \uc785\ub2c8\ub2e4.
\n \uc571\uc5d0\uc11c \ubc18\ubcf5 \uc0ac\uc6a9\ub418\ub294 UI \ub514\uc790\uc778 \ucf54\ub4dc\ub97c \ubcc4\ub3c4\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc0dd\uc131\ud558\uc5ec \ud569\uc131\ud558\ub294 \ud559\uc2b5\uc744 \ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

3.1.\ucef4\ud3ec\uc9c0\uc158 \uc900\ube44<\/strong><\/h3>\n
\n

\uc544\ub798\uc758 \ub9c1\ud06c\ub294 index.js\uc5d0\uc11c App \ucef4\ud3ec\ub10c\ud2b8 \ub300\uc2e0 Comp \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc784\ud3ec\ud2b8 \ud55c \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n

\ub610\ud55c \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\ubd80\uc5d0 style \uc744 \uac1d\uccb4\ub85c \uc791\uc131\ud558\uc5ec \uc801\uc6a9\ud558\uc600\uc2b5\ub2c8\ub2e4.
\n \uc5d0\ub514\ud130 \uc6b0\uce21\ud558\ub2e8\uc758 Open Sandbox \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74 \uc608\uc81c \ucf54\ub4dc\ub97c \ub0b4\ub824 \ubc1b\uc73c\uc2dc\uac70\ub098 \ubc14\ub85c \uc628\ub77c\uc778\uc5d0\uc11c \ud3b8\uc9d1\ud558\uc2e4\uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n\ud83d\udd17\ucf54\ub4dc\uc0cc\ub4dc\ubc15\uc2a4\ub9c1\ud06c<\/a><\/p>\n

\n

Info<\/strong>: \ud83d\udca1 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc544\ub798\uc758 \uadf8\ub9bc\uacfc \uac19\uc740 \uad6c\uc870\ub85c \uc774\ub8e8\uc5b4\uc838 \uc788\uc73c\uba70 \ub3d9\uc77c\ud55c \uc2a4\ud0c0\uc77c\uc744 \uc911\ubcf5\ud558\uc5ec \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n

\uc911\ubcf5\ub418\ub294 \uc2a4\ud0c0\uc77c\uc744 \ucef4\ud3ec\uc9c0\uc158\uc73c\ub85c \uc218\uc815\ud574 \ubd05\uc2dc\ub2e4.<\/p>\n

\"\"<\/p>\n

\uc6b0\uc120 \uc911\ubcf5\ub418\ub294 \uc2a4\ud0c0\uc77c\uc744 \ub9c8\uad6c\ub9c8\uad6c \ub123\uc5b4\uc11c \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ubd05\uc2dc\ub2e4.<\/p>\n

3.1.1.srcindex.js<\/strong><\/h4>\n
import { StrictMode } from "react";\nimport { createRoot } from "react-dom\/client";\n\n**import Comp from ".\/Comp";**\n\nconst rootElement = document.getElementById("root");\nconst root = createRoot(rootElement);\n\nroot.render(\n  <StrictMode>\n**    <Comp \/>**\n  <\/StrictMode>,\n);\n<\/code><\/pre>\n
3.1.1.srcComp.js<\/strong><\/h4>\n
import CompA from '.\/CompA';\nconst style = {\n\tcolor: 'white',\n\tbackground: '#23b1c2',\n\twidth: '50%',\n\ttextAlign: 'center',\n\tborderRadius: '20px',\n\tmargin: '20px auto',\n\tpadding: '20px',\n};\nconst Comp = (props) => {\n\treturn (\n\t\t<div style={style}>\n\t\t\t<CompA \/>\n\t\t<\/div>\n\t);\n};\nexport default Comp;\n<\/code><\/pre>\n
3.1.3.srcCompA.js<\/strong><\/h4>\n
import CompAA from ".\/CompAA";\nconst style = {\n  color: "white",\n  width: "80%",\n  padding: "20px",\n  background: "#d3b1b1",\n  textAlign: "center",\n  borderRadius: "20px",\n  marginRight: "20px",\n  marginTop: "20px",\n};\nconst CompA = (props) => {\n  return (\n    <div style={style}>\n      <CompAA \/>\n    <\/div>\n  );\n};\nexport default CompA;\n<\/code><\/pre>\n
3.1.4.srcCompAA.js<\/strong><\/h4>\n
const style = {\n  color: "white",\n  background: "#a5b1b1",\n  textAlign: "center",\n  borderRadius: "20px",\n  marginRight: "20px",\n  marginTop: "20px",\n  display: "inline-block",\n  padding: "20px",\n};\nconst CompAA = (props) => {\n  return (\n    <>\n      <div style={style}>CompAA<\/div>\n      <div style={style}>CompAA<\/div>\n      <div style={style}>CompAA<\/div>\n    <\/>\n  );\n};\nexport default CompAA;\n<\/code><\/pre>\n
\"\"<\/p>\n
\uc774\ubbf8\uc9c0\uc640 \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9cc\ub4e4\uc5b4\uc9c8 \uac83\uc785\ub2c8\ub2e4.
\n\ube68\uac04\ubc30\uacbd\uc758 \ucf54\ub4dc\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub9c8\ub2e4 \uacf5\ud1b5\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 UI\uc2a4\ud0c0\uc77c \uc785\ub2c8\ub2e4.<\/p>\n
3.2.\ucef4\ud3ec\uc9c0\uc158 \uc2dc\uc791<\/strong><\/h3>\n
3.2.1 srcindex.js<\/strong><\/h4>\n
index.js \uc5d0\uc11c \uc2dc\uc791\ucef4\ud3ec\ub10c\ud2b8\ub97c Comp \uc5d0\uc11c Box \ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/p>\n
...\n\n**import Box from ".\/Box";**\n\n...\n\nroot.render(\n  <StrictMode>\n**    <Box \/>**\n  <\/StrictMode>,\n);\n<\/code><\/pre>\n
3.2.1 srcBox.js<\/strong><\/h4>\n
src \ud3f4\ub354\ud558\uc704\uc5d0 Box \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud558\uace0 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.
\n\ubcc0\uc218 style \uc5d0 css \uc18d\uc131\uac12\uc744 \uac1d\uccb4\ud615\ud0dc\ub85c \ucd08\uae30\ud654 \ud588\uc2b5\ub2c8\ub2e4.
\nBox \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc120\uc5b8\ud558\uace0 div \uc694\uc18c\uc5d0 \ubbf8\ub9ac \uc815\uc758\ud55c style \uac1d\uccb4\ub97c style \uc18d\uc131\uc73c\ub85c \ud560\ub2f9\ud558\uc5ec \ubc18\ud658\ud558\ub294 \ub85c\uc9c1\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4.
\n\ub9c8\uc9c0\ub9c9\uc73c\ub85c Box \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc678\ubd80\uc5d0\uc11c \uc0ac\uc6a9\ud560\uc218 \uc788\ub3c4\ub85d export \ud569\ub2c8\ub2e4.<\/p>\n
const style = {\n\tmarginTop: '20px',\n\tborderRadius: '20px',\n\ttextAlign: 'center',\n\tpadding: '20px',\n\tcolor: 'white',\n};\nconst Box = (props) => {\n\treturn <div style={style}><\/div>;\n};\nexport default Box;\n<\/code><\/pre>\n
3.2.2. srcCompAA.js<\/strong><\/h4>\n
\ubc15\uc2a4\ucef4\ud3ec\ub10c\ud2b8\ub97c \uc784\ud3ec\ud2b8 \ud569\ub2c8\ub2e4.
\nreturn \ud568\uc218\uc758 \uae30\uc874\uc758 \ucf54\ub4dc\ub97c \uc0ad\uc81c\ud55c \ud6c4 \uc784\ud3ec\ud2b8\ud55c Box \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubc18\ud658\ud558\ub3c4\ub85d \uc218\uc815\ud569\ub2c8\ub2e4.
\n\uc774\ub54c Box \ucef4\ud3ec\ub10c\ud2b8\ub294 CompAA \uc758 style \uac1d\uccb4\ub97c style \uc18d\uc131\uc73c\ub85c \ud560\ub2f9\ubc1b\uc544 \uc0ac\uc6a9\ud558\ub3c4\ub85d \uad6c\ud604\ud569\ub2c8\ub2e4.
\n\uadf8\ub7fc \uc774\uc81c \ud654\uba74\uc744 \uc608\uc0c1\ud558\uba74\uc11c \uc2e4\ud589\ud574\ubd05\uc2dc\ub2e4
\nBox \ucef4\ud3ec\ub10c\ud2b8\uc5d0 style \uac1d\uccb4\uc758 \uac12\uc774 \uc801\uc6a9\ub3fc\uc11c \ub80c\ub354\ub9c1 \ub420\uac83 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
import Box from '.\/Box';\nconst style = {\n\tbackground: '#a5b1b1',\n\tdisplay: 'inline-block',\n\tmarginRight: '20px',\n};\nconst CompAA = (props) => {\n\treturn (\n\t\t<>\n\t\t\t<Box style={style}>CompAA<\/Box>\n\t\t\t<Box style={style}>CompAA<\/Box>\n\t\t\t<Box style={style}>CompAA<\/Box>\n\t\t<\/>\n\t);\n};\nexport default CompAA;\n<\/code><\/pre>\n
\uc608\uc0c1\uacfc \ub2e4\ub974\uac8c CompAA \uc758 \ub370\uc774\ud130\uac00 \uc804\ud600 \ub80c\ub354\ub9c1 \ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n
\"Box<\/p>\n
\uac1c\ubc1c\uc790 \ubaa8\ub4dc\uc5d0\uc11c \uc18c\uc2a4\ucf54\ub4dc\ub97c \ud655\uc778\ud574\ubcf4\uba74 Box \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc2a4\ud0c0\uc77c \uc18d\uc131\uc774 \uc801\uc6a9\ub41c\uac83\uc740 \ubcf4\uc774\ub098 \uae30\uc874 CompAA \uc758 \uc2a4\ud0c0\uc77c\uacfc \ub370\uc774\ud130\uac00 \ubcf4\uc774\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/strong><\/p>\n
\n
\n
\"\"<\/p>\n<\/div>\n
\n
\uc65c\uadf8\ub7f4\uae4c\uc694?
\nCompAA \uc758 UI\ub294 Box \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc784\ud3ec\ud2b8 \ub41c\uac83\uc774\uba70 Box \ucef4\ud3ec\ub10c\ud2b8\ub294 \ub2e4\ub978 \ud568\uc218\uc774\uae30 \ub54c\ubb38\uc5d0 CompAA \uc758 \uac12\uc744 \uc804\ub2ec\ud558\ub824\uba74 \uc778\uc790\uc640 \ub9e4\uac1c\ubcc0\uc218\ub97c \ud65c\uc6a9\ud574\uc57c \ud558\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n
\uc5b4\ub5bb\uac8c \ud574\uc57c \ud560\uae4c\uc694?<\/strong><\/em><\/p>\n
3.3.props.children<\/strong><\/h3>\n
\n
\ucef4\ud3ec\ub10c\ud2b8\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.<\/strong><\/p>\n<\/blockquote>\n
  \ud568\uc218\ub294 \uc778\uc218\uc640 \ub9e4\uac1c\ubcc0\uc218\uc758 \ud615\ud0dc\ub85c \uc11c\ub85c \uac12\uc744 \uc804\ub2ec\ud560\uc218 \uc788\uc8e0.<\/strong><\/p>\n
3.3.1. srcBox.js<\/strong><\/h4>\n
const style = {\n\tmarginTop: '20px',\n\tborderRadius: '20px',\n\ttextAlign: 'center',\n\tpadding: '20px',\n\tcolor: 'white',\n};\nconst Box = (props) => {\n**\tconsole.log(props);**\n\treturn <div style={style}><\/div>;\n};\nexport default Box;\n<\/code><\/pre>\n
\ub9ac\uc561\ud2b8\uc5d0\uc11c\ub294 \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub9e4\uac1c\ubcc0\uc218 \ub97c \uc791\uc131\ud558\uba74 \uae30\ubcf8\uc801\uc73c\ub85c \uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc804\ub2ec\ud558\ub294 \uac12 (\uc778\uc218) \uc744 \ubc1b\uc744\uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n\uc774\ub54c \ub9e4\uac1c\ubcc0\uc218\uc758 \uc774\ub984\uc740 abc, def \ub4f1 \uc5ec\ub7ec\ubd84\uc774 \ub9c8\uc74c\ub300\ub85c \uc9c0\uc815\ud558\uc154\ub3c4 \ub418\ub098 \uc77c\ubc18\uc801\uc73c\ub85c props \ub85c \uc791\uc131\ud569\ub2c8\ub2e4.
\n\ucf54\ub4dc\ub97c \uc791\uc131\ud6c4 \ucf58\uc194\ucc3d\uc744 \uc5f4\uc5b4\ubcf4\uba74 props \ub9e4\uac1c\ubcc0\uc218\uc5d0 \uc800\uc7a5\ub41c \uac12\uc774 \ud655\uc778\ub429\ub2c8\ub2e4.<\/p>\n
\"\"<\/p>\n
\uc774\uc81c Box \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc804\ub2ec\ubc1b\uc740 \uac12\uc744 \uc801\uc6a9\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
3.3.2 \ucf58\ud150\uce20 \ud569\uc131<\/strong><\/h4>\n
props.children\uc740 React\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \ud2b9\ubcc4\ud55c \uc18d\uc131\uc785\ub2c8\ub2e4.
\n\uc774 \uc18d\uc131\uc740 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc804\ub2ec\ub41c \ubaa8\ub4e0 \ucee8\ud150\uce20\ub97c \ucc38\uc870\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\/\/src\/Box.js\nconst style = {\n\tmarginTop: '20px',\n\tborderRadius: '20px',\n\ttextAlign: 'center',\n\tpadding: '20px',\n\tcolor: 'white',\n};\nconst Box = (props) => {\n\tconsole.log(props);\n\treturn <div style={style}>{props.children}<\/div>;\n};\nexport default Box;\n<\/code><\/pre>\n
\"\uc774\uc81c<\/p>\n
3.3.3 \uc2a4\ud0c0\uc77c \ud569\uc131<\/strong><\/h4>\n
\uc2a4\ud0c0\uc77c\uc740 \uac1d\uccb4\ud615\ud0dc\ub85c \uc804\ub2ec\ubc1b\uace0 \uc788\uc73c\ubbc0\ub85c \uc804\uac1c\uc5f0\uc0b0\uc790\ub97c \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4.
\n\uc0c8 \ubcc0\uc218\uc5d0 Box\ucef4\ud3ec\ub10c\ud2b8\uc758 \uc18d\uc131\uacfc \ubd80\ubaa8\ucef4\ud3ec\ub10c\ud2b8\uc758 \uc18d\uc131\uc744 \uc5f0\uacb0\ud569\ub2c8\ub2e4.
\n\uc694\uc18c\uc5d0\ub294 \uc0c8 \ubcc0\uc218\uc758 \uc774\ub984\uc744 \ub123\uc5b4\uc90d\ub2c8\ub2e4.<\/p>\n
\/\/src\/Box.js\n...\nconst newStyle = { ...style, ...props.style };\nreturn <div style={newStyle}>{props.children}<\/div>;\n...\n<\/code><\/pre>\n
\"\uc774\uc81c<\/p>\n
3.4.\ubb38\uc81c<\/h3>\n
\ub098\uba38\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\ub3c4 \ubaa8\ub450 Box\ucef4\ud3ec\ub10c\ud2b8\uc640 \ud569\uc131\ud574\ubcf4\uc138\uc694<\/p>\n

\nsrc\/Comp.js<\/strong><\/p>\n
\/\/src\/Comp.js\nimport Box from '.\/Box';\nimport CompA from '.\/CompA';\nconst style = {\n\tbackground: '#23b1c2',\n\twidth: '50%',\n\tmarginLeft: 'auto',\n\tmarginRight: 'auto',\n\tmarginBottom: '20px',\n};\nconst Comp = (props) => {\n\treturn (\n\t\t<Box style={style}>\n\t\t\t<CompA \/>\n\t\t<\/Box>\n\t);\n};\nexport default Comp;\n<\/code><\/pre>\n
src\/CompA.js<\/strong><\/p>\n
\/\/src\/CompA.js\nimport Box from '.\/Box';\nimport CompAA from '.\/CompAA';\n\nconst style = {\n\twidth: '80%',\n\tbackground: '#d3b1b1',\n};\nconst CompA = (props) => {\n\treturn (\n\t\t<>\n\t\t\t<h1>CompA<\/h1>\n\t\t\t<Box style={style}>\n\t\t\t\t<CompAA \/>\n\t\t\t<\/Box>\n\t\t\t<Box style={style}>\n\t\t\t\t<CompAA \/>\n\t\t\t<\/Box>\n\t\t\t<Box style={style}>\n\t\t\t\t<CompAA \/>\n\t\t\t<\/Box>\n\t\t<\/>\n\t);\n};\nexport default CompA;\n<\/code><\/pre>\n
<\/Accordion><\/p>\n
4. Composition \uc2e4\uc804\uc608\uc81c<\/strong><\/h2>\n
\n
\uc774\uc81c \uba64\ubc84\uc571\uc5d0 \uc801\uc6a9\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
  \uc601\uc0c1\uc744 \ubcf4\uace0 \ubc14\ub85c \ucf54\ub4dc\ub97c \ub530\ub77c \uce58\uc2dc\uae30 \ubcf4\ub2e4\ub294 \uc77c\uc2dc\uc815\uc9c0 \ud558\uc2dc\uace0\uc5ec\ub7ec\ubd84\uc774 \uc2a4\uc2a4\ub85c \ucef4\ud3ec\uc9c0\uc158\uc744 \ud574\ubcf4\uc2dc\uace0 \uc81c \ubc29\uc2dd\uc744 \ucc38\uace0\ud558\uc154\uc57c \uc2e4\ub825\uc774 \ud5a5\uc0c1\ub429\ub2c8\ub2e4.
\n  \uc544\ub798\uc758 \uadf8\ub9bc\uc5d0 \ud45c\uc2dc\ub41c \ubd80\ubd84\uc744 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ubd84\ub9ac\ud558\uace0 \ud569\uc131\ud574\ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n
\"\uc911\ubcf5\ucf54\ub4dc\uac00<\/p>\n
4.2. src\/index.js \uc218\uc815<\/strong><\/h3>\n
    \n
  1. index.js \ud30c\uc77c\uc744 \uc5f4\uace0 App \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\uc2dc \uc784\ud3ec\ud2b8 \ud569\ub2c8\ub2e4
    \nsrcindex.js<\/strong><\/li>\n<\/ol>\n
    import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport Comp from '.\/Comp';\nimport App from '.\/App';\nimport reportWebVitals from '.\/reportWebVitals';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n\t<React.StrictMode>\n\t\t<App \/>\n\t\t{\/* <Comp \/> *\/}\n\t<\/React.StrictMode>\n);\n\n\/\/ If you want to start measuring performance in your app, pass a function\n\/\/ to log results (for example: reportWebVitals(console.log))\n\/\/ or send to an analytics endpoint. Learn more: https:\/\/bit.ly\/CRA-vitals\nreportWebVitals();\n<\/code><\/pre>\n
    4.3. \ucef4\ud3ec\ub10c\ud2b8 \uad6c\uc870 \uc900\ube44<\/strong><\/h3>\n
    \n
    \ub9ac\uc561\ud2b8\uc758 \uc571\uc740 \uaddc\ubaa8\uac00 \ucee4\uc9c0\uac8c \ub418\uba74 \ucef4\ud3ec\ub10c\ud2b8 \ud30c\uc77c\ub3c4 \ub9ce\uc544\uc9d1\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
      \ub9ce\uc740 \ucef4\ud3ec\ub10c\ud2b8 \ud30c\uc77c\uc744 \uc5b4\ub5bb\uac8c \uad00\ub9ac \ud558\ub294\uc9c0\uc5d0 \ub300\ud55c \ubc29\ubc95\ub860\ub3c4 \uc81c\uc2dc\ub418\uace0 \uc788\uc73c\uba70 \uad00\ub9ac\ud558\ub294 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \uc874\uc7ac\ud558\ub294 \uc815\ub3c4\uc785\ub2c8\ub2e4.
    \n  \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ubc29\ubc95\uc740 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc5ed\ud560\ubcc4\ub85c \ud3f4\ub354\ub97c \ub098\ub204\uc5b4 \ubcf4\ub294\uac83\uc778\ub370\uc694.
    \n  \uc6b0\ub9ac\uc758 \uc571\uc740 \uc544\ub798\uc758 \uad6c\uc870\ub85c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uad00\ub9ac\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
    \"\"<\/p>\n
      \n
    1. src\/component \ud3f4\ub354\uc5d0 \uc544\ub798\uc758 \ud3f4\ub354\ub97c \uc0dd\uc131 \ud569\ub2c8\ub2e4<\/li>\n<\/ol>\n