{"id":156,"date":"2026-06-26T13:33:01","date_gmt":"2026-06-26T13:33:01","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=156"},"modified":"2026-06-26T13:33:07","modified_gmt":"2026-06-26T13:33:07","slug":"props","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=156","title":{"rendered":"props"},"content":{"rendered":"

1. \ub9ac\uc561\ud2b8 props<\/strong><\/h2>\n

1.1. \ub370\uc774\ud130\uc758 \ub3d9\uc801\ucd9c\ub825<\/strong><\/h4>\n
\n

\ub9ac\uc561\ud2b8\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud558\ub294 \ubb38\ubc95\uc744 JSX(JavaScript XML: Javascript\uc5d0 XML\uc744 \ucd94\uac00\ud55c \ud655\uc7a5\ud55c \ubb38\ubc95) \ub77c\uace0 \ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n

jsx \uc5d0\ub294\u00a0{}<\/code>\u00a0\uae30\ud638 \uc548\uc5d0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub97c \uc791\uc131\ud558\uba74 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud560\uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n MemberItem \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud558\uace0 \uc788\ub294 \ub370\uc774\ud130\ub97c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ud45c\ud604\uc2dd\uc73c\ub85c \ubcc0\uacbd\ud558\uc5ec \uc791\uc131\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4<\/p>\n

1.1.1. \uc791\uc131<\/strong><\/h4>\n
    \n
  1. components\/MemberItem.js \ub97c \uc218\uc815\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
    \/\/MemberItem.js\nimport ".\/MemberItem.css";\nconst MemberItem = () => {\n  const member = {\n    img: [\n      "http:\/\/qwerew.cafe24.com\/images\/pet-1.jpg",\n      "http:\/\/qwerew.cafe24.com\/images\/pet-2.jpg",\n      "http:\/\/qwerew.cafe24.com\/images\/pet-3.jpg",\n    ],\n    name: ["\uae40\ub9dd\uace0", "\uae40\uacf5\uc8fc", "\uad6c\ub984\uc774"],\n    email: ["abc@de.com", "aeb@de.com", "etd@de.com"],\n  };\n\n  return (\n    <ul className="list_body">\n      <li className="list_item">\n        <div className="list_img">\n          <img src={member.img[0]} alt={member.name[0]} \/>\n        <\/div>\n        <div className="list_desc">\n          <span className="title">\uc774\ub984<\/span>\n          <span className="text">{member.name[0]}<\/span>\n        <\/div>\n        <div className="list_desc">\n          <span className="title">\uc774\uba54\uc77c<\/span>\n          <span className="text">{member.email[0]}<\/span>\n        <\/div>\n      <\/li>\n      <li className="list_item">\n        <div className="list_img">\n          <img src={member.img[1]} alt={member.name[1]} \/>\n        <\/div>\n        <div className="list_desc">\n          <span className="title">\uc774\ub984<\/span>\n          <span className="text">{member.name[1]}<\/span>\n        <\/div>\n        <div className="list_desc">\n          <span className="title">\uc774\uba54\uc77c<\/span>\n          <span className="text">{member.email[1]}<\/span>\n        <\/div>\n      <\/li>\n      <li className="list_item">\n        <div className="list_img">\n          <img src={member.img[2]} alt={member.name[2]} \/>\n        <\/div>\n        <div className="list_desc">\n          <span className="title">\uc774\ub984<\/span>\n          <span className="text">{member.name[2]}<\/span>\n        <\/div>\n        <div className="list_desc">\n          <span className="title">\uc774\uba54\uc77c<\/span>\n          <span className="text">{member.email[2]}<\/span>\n        <\/div>\n      <\/li>\n    <\/ul>\n  );\n};\nexport default MemberItem;\n<\/code><\/pre>\n
    \"\"<\/p>\n
    2. Props<\/strong><\/h2>\n
    \n
    \ub9cc\uc57d App.js\uc5d0\uc11c MemberItem \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc5ec\ub7ec\ubc88 \uc0ac\uc6a9\ud55c\ub2e4\uba74 \uc5b4\ub5bb\uac8c \ud574\uc57c\ud560\uae4c\uc694?<\/p>\n<\/blockquote>\n
    2.1. App.js<\/strong><\/h4>\n
    import logo from '.\/logo.svg';\nimport MemberItem from '.\/components\/MemberItem1';\nfunction App() {\n\treturn (\n\t\t<div className='App'>\n\t\t\t<img src={logo} className='App-logo' alt='logo' style=100px \/>\n\t\t\t<MemberItem \/>\n\t\t\t<MemberItem \/>\n\t\t<\/div>\n\t);\n}\n\nexport default App;\n<\/code><\/pre>\n
    \uc5ec\ub7ec\ubc88 \uac19\uc740 \ub9ac\uc2a4\ud2b8\ub97c \ubc18\ubcf5\ud560\uc218 \uc788\uc2b5\ub2c8\ub2e4 \ub108\ubb34 \ud3b8\ub9ac\ud558\uc8e0?<\/p>\n
    \"\"<\/p>\n
    <\/blockquote>\n
      \ud558\uc9c0\ub9cc MemberItem \ucef4\ud3ec\ub10c\ud2b8\uc758 \ucf58\ud150\uce20\uc758 \ub0b4\uc6a9\uc774 \ub2e4\ub97c \uacbd\uc6b0 \uc5b4\ub5bb\uac8c \ud574\uc57c \ud560\uae4c\uc694?
    \n  props \ub77c\ub294 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud558\uba74 \ub429\ub2c8\ub2e4.
    \n  props \ub780 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uac8c \uc804\ub2ec\ud558\ub294 \ub370\uc774\ud130\ub97c \uc758\ubbf8\ud558\ub294\ub370\uc694.
    \n  props \ub97c \uc0ac\uc6a9\ud558\uba74 \ucef4\ud3ec\ub10c\ud2b8\uac04\uc758 \ub370\uc774\ud130\ub97c \uacf5\uae09\ud560\uc218 \uc788\uc2b5\ub2c8\ub2e4.
    \n  \uc9c0\uae08\ubd80\ud130 props\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubaa9\ub85d\ub9c8\ub2e4 \ub2e4\ub978 \ub370\uc774\ud130\ub97c \ucd9c\ub825\ud574\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
    2.2.\u00a0props<\/strong><\/h3>\n
      \n
    1. props \ub97c \uc9c4\ud589\ud558\uae30 \uc704\ud574 \uc571\uc758 \uad6c\uc870\ub97c \ubcc0\uacbd\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/li>\n
    2. App.js \uc5d0 MemberDB \ubcc0\uc218\ub97c \uc0dd\uc131\ud558\uace0 \ud68c\uc6d0\uc815\ubcf4\ub97c \ub123\uc5b4 \ucd08\uae30\ud654 \ud569\ub2c8\ub2e4<\/li>\n<\/ol>\n
      2.2.1. App.js<\/strong><\/h4>\n
      import logo from '.\/logo.svg';\nimport MemberItem from '.\/components\/MemberItem';\nfunction App() {\n\tconst MemberDB = [\n\t\t{ id: 'm1', name: '\uae40\uacbd\uc544', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-1.jpg', email: 'abc@defg.com' },\n\t\t{ id: 'm2', name: '\uae40\ub9dd\uace0', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-2.jpg', email: 'efg@defg.com' },\n\t\t{ id: 'm3', name: '\uae40\ubbfc\uc815', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-3.jpg', email: 'hij@defg.com' },\n\t\t{ id: 'm4', name: '\uc724\ud604\uc120', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-4.jpg', email: 'lmn@defg.com' },\n\t\t{ id: 'm4', name: '\uc774\uc18c\uc815', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-5.jpg', email: 'opq@defg.com' },\n\t];\n\treturn (\n\t\t<div className='App'>\n\t\t\t<img src={logo} className='App-logo' alt='logo' style=100px \/>\n\t\t\t<MemberItem \/>\n\t\t\t<MemberItem \/>\n\t\t\t<MemberItem \/>\n\t\t\t<MemberItem \/>\n\t\t<\/div>\n\t);\n}\n\nexport default App;\n<\/code><\/pre>\n
        \n
      1. \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud569\ub2c8\ub2e4.<\/li>\n
      2. MemberItem \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud55c\uac1c\ub9cc \ub0a8\uae30\uace0 \uc0ad\uc81c\ud569\ub2c8\ub2e4.<\/li>\n
      3. Props \ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
        <MemberItem name={MemberDB[0].name} thumb={MemberDB[0].thumb} email={MemberDB[0].email} \/>\n<\/code><\/pre>\n
        2.2.2. MemberItem.js<\/strong><\/h4>\n
          \n
        1. \ub370\uc774\ud130\uc758 \uad6c\uc870\uac00 \ubcc0\uacbd \ub418\uc5c8\uc73c\ubbc0\ub85c components \ud3f4\ub354\uc758 MemberList \ucef4\ud3ec\ub10c\ud2b8\uc758 \ucf54\ub4dc\ub97c \uc218\uc815\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
            \n
          • \ubcc0\uc218 member \uc0ad\uc81c \ud569\ub2c8\ub2e4<\/li>\n
          • ul.list_body>li.list_item>((.list_img>img)+(.list_desc>span.title+span+text))<\/code>\u00a0\uc758 \uad6c\uc870\ub9cc \ub0a8\uae30\uace0 \ubaa8\ub450 \uc0ad\uc81c \ud569\ub2c8\ub2e4<\/li>\n<\/ul>\n
              \n
            1. \ubd80\ubaa8\ucef4\ud3ec\ub10c\ud2b8\uac00 \uc804\ub2ec\ud558\ub294 \ub370\uc774\ud130\ub97c \ub9e4\uac1c\ubcc0\uc218\ub85c \uc804\ub2ec \ubc1b\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                \n
              • \uc774\ub54c \uc791\uc131\ud55c\u00a0props<\/code>\u00a0\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \uae30\ub2a5\uc73c\ub85c \uc0c1\uc704 \uc694\uc18c\uac00 \uc804\ub2ec\ud558\ub294 \ubaa8\ub4e0 \ub370\uc774\ud130\ub97c \uacf5\uae09\ubc1b\uc744\uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n
                \/\/components\/MemberList.js\nimport '.\/MemberItem.css';\nconst MemberItem = (props) => {\n\tconsole.log(props);\n\treturn (\n\t\t<ul className='list_body'>\n\t\t\t<li className='list_item'>\n\t\t\t\t<div className='list_img'>\n\t\t\t\t\t<img src={props.thumb} alt={props.name} \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div className='list_desc'>\n\t\t\t\t\t<span className='title'>\uc774\ub984<\/span>\n\t\t\t\t\t<span className='text'>{props.name}<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div className='list_desc'>\n\t\t\t\t\t<span className='title'>\uc774\uba54\uc77c<\/span>\n\t\t\t\t\t<span className='text'>{props.email}<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/li>\n\t\t<\/ul>\n\t);\n};\nexport default MemberItem;\n<\/code><\/pre>\n
                \"\"<\/p>\n
                2.2.3. App.js<\/strong><\/h4>\n
                \n
                \ub2e4\uc74c \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
                \/\/src\/App.js\nimport logo from '.\/logo.svg';\nimport MemberItem from '.\/components\/MemberItem';\nfunction App() {\n\tconst MemberDB = [\n\t\t{ id: 'm1', name: '\uae40\uacbd\uc544', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-1.jpg', email: 'abc@defg.com' },\n\t\t{ id: 'm2', name: '\uae40\ub9dd\uace0', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-2.jpg', email: 'efg@defg.com' },\n\t\t{ id: 'm3', name: '\uae40\ubbfc\uc815', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-3.jpg', email: 'hij@defg.com' },\n\t\t{ id: 'm4', name: '\uc724\ud604\uc120', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-4.jpg', email: 'lmn@defg.com' },\n\t\t{ id: 'm4', name: '\uc774\uc18c\uc815', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-5.jpg', email: 'opq@defg.com' },\n\t];\n\treturn (\n\t\t<div className='App'>\n\t\t\t<img src={logo} className='App-logo' alt='logo' style=100px \/>\n\t\t\t<MemberItem name={MemberDB[0].name} thumb={MemberDB[0].thumb} email={MemberDB[0].email} \/>\n\t\t\t<MemberItem name={MemberDB[1].name} thumb={MemberDB[1].thumb} email={MemberDB[1].email} \/>\n\t\t\t<MemberItem name={MemberDB[2].name} thumb={MemberDB[2].thumb} email={MemberDB[2].email} \/>\n\t\t\t<MemberItem name={MemberDB[3].name} thumb={MemberDB[3].thumb} email={MemberDB[3].email} \/>\n\t\t\t<MemberItem name={MemberDB[4].name} thumb={MemberDB[4].thumb} email={MemberDB[4].email} \/>\n\t\t<\/div>\n\t);\n}\n\nexport default App;\n<\/code><\/pre>\n
                3. \ucef4\ud3ec\ub10c\ud2b8 \ubd84\ud560\ud558\uae30<\/strong><\/h2>\n
                \n
                MemberItem \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc544\ub798\uc758 \uc774\ubbf8\uc9c0\ucc98\ub7fc \ub450\uac1c\ub85c \ub098\ub204\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
                \"\"<\/p>\n
                  \ub9ac\uc561\ud2b8\uc758 \uc571\uc740 \uae30\uc874 html \ubb38\uc11c\ucc98\ub7fc \ud558\ub098\uc758 \ud398\uc774\uc9c0\ub85c \uad6c\uc131\ub418\ub294 \uac83\uc774 \uc544\ub2c8\ub77c \ucef4\ud3ec\ub10c\ud2b8\uac00 \ubaa8\uc5ec\uc11c \ud398\uc774\uc9c0\ub97c \uad6c\uc131\ud558\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4.
                \n  \uadf8\ub807\uae30 \ub54c\ubb38\uc5d0 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc138\ubd84\ud654 \ud558\uc5ec \uac1c\ubc1c\ud558\uac8c \ub420 \uacbd\uc6b0 \uac01 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub3c5\ub9bd\uc131\uc744 \uc720\uc9c0\ud558\uac8c \ub418\uba70 \ucf54\ub4dc\uc758 \uc7ac\uc0ac\uc6a9\uc131\uc774 \ub192\uc544\uc9d1\ub2c8\ub2e4.<\/p>\n
                3.1. ItemThumb.js \uc0dd\uc131<\/strong><\/h3>\n
                  \n
                1. \n
                  components\/ItemThumb.js<\/code>\u00a0\ub97c \uc0dd\uc131\ud558\uace0 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub9cc\ub4ed\ub2c8\ub2e4. \uc774\ub54c \ub9e4\uac1c\ubcc0\uc218\uc5d0 props \ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n<\/li>\n
                2. \n
                  components\/ItemThumb.css<\/code>\u00a0\ub97c \uc0dd\uc131\ud558\uace0 \uc784\ud3ec\ud2b8 \ud569\ub2c8\ub2e4.<\/p>\n<\/li>\n
                3. \n
                  components\/MemberItem.js<\/code>\u00a0\uc5d0\uc11c \uc774\ubbf8\uc9c0\ub97c \ud45c\uc2dc\ud558\ub294 \ucf54\ub4dc\ub97c \uc798\ub77c \ubd99\uc785\ub2c8\ub2e4.<\/p>\n<\/li>\n
                4. \n
                  components\/MemberItem.css<\/code>\u00a0\uc5d0\uc11c \uc774\ubbf8\uc9c0\ub97c \ud45c\uc2dc\ud558\ub294 css\ub97c \uc798\ub77c \ubd99\uc785\ub2c8\ub2e4.<\/p>\n<\/li>\n<\/ol>\n
                  3.1.1.components\/ItemThumb.js<\/h4>\n
                  import '.\/ItemThumb.css';\n\nconst ItemThumb = (props) => {\n\treturn (\n\t\t<div className='list_img'>\n\t\t\t<img src={props.thumb} alt={props.name} \/>\n\t\t<\/div>\n\t);\n};\nexport default ItemThumb;\n<\/code><\/pre>\n
                  3.1.1.components\/ItemThumb.css<\/h4>\n
                  .list_img {\nmax-width: 15vw;\nmargin-bottom: 1.5rem;\n}\nimg {\nwidth: 100%;\n}\n<\/code><\/pre>\n
                  3.2. ItemDesc.js \uc0dd\uc131<\/strong><\/h3>\n
                    \n
                  1. components\/ItemDesc.js<\/code>\u00a0\ub97c \uc0dd\uc131\ud558\uace0 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub9cc\ub4ed\ub2c8\ub2e4. \uc774\ub54c \ub9e4\uac1c\ubcc0\uc218\uc5d0 props \ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/li>\n
                  2. components\/MemberItem.js<\/code>\u00a0\uc5d0\uc11c \uc124\uba85\uc744 \ud45c\uc2dc\ud558\ub294 \ucf54\ub4dc\ub97c \uc798\ub77c \ubd99\uc785\ub2c8\ub2e4.<\/li>\n
                  3. components\/MemberItem.css<\/code>\u00a0\uc5d0\uc11c \uc124\uba85\uc744 \ud45c\uc2dc\ud558\ub294 css\ub97c \uc798\ub77c \ubd99\uc785\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                    3.2.1.components\/ItemDesc.js<\/h4>\n
                    import '.\/ItemDesc.css';\n\nconst ItemDesc = (props) => {\n\treturn (\n\t\t<div className='list_desc'>\n\t\t\t<span className='title'>\uc774\ub984<\/span>\n\t\t\t<span className='text'>{props.name}<\/span>\n\t\t<\/div>\n\t);\n};\nexport default ItemDesc;\n<\/code><\/pre>\n
                    3.2.1.components\/ItemDesc.css<\/h4>\n
                    .list_desc {\n\tmargin-bottom: 1.5rem;\n\tcolor: var(--tone-2);\n\tline-height: 1.7;\n\tdisplay: flex;\n\tgap: 2rem;\n}\n.title {\n\tfont-size: 1.4rem;\n\tfont-weight: 900;\n\tcolor: var(--tint-2);\n}\n.text {\n\tfont-size: 1.6rem;\n\tfont-weight: 400;\n}\n<\/code><\/pre>\n
                    3.3. \ub370\uc774\ud130 \uc804\ub2ec<\/strong><\/h3>\n
                    \n
                    App\uc5d0\uc11c \uc804\ub2ec\ubc1b\uc740 \ub370\uc774\ud130\ub294 MemberItem \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uac01\uac01 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub098\ub204\uc5b4 \uc804\ub2ec\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
                    \"\"<\/p>\n
                    3.4. MemberItem.js<\/strong><\/h3>\n
                      \n
                    1. MemberItem \ucef4\ud3ec\ub10c\ud2b8\uc5d0 ItemThumb,ItemDesc \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc784\ud3ec\ud2b8 \ud569\ub2c8\ub2e4.<\/li>\n
                    2. \uac01 \ucef4\ud3ec\ub10c\ud2b8\ub85c App \uc5d0\uc11c \uacf5\uae09\ubc1b\uc740 \ub370\uc774\ud130\ub97c \ub2e4\uc2dc \uc804\ub2ec\ud569\ub2c8\ub2e4.<\/li>\n
                    3. \ucf58\uc194\ub85c\uadf8\ub97c \ubcf4\uba74 App \uc5d0\uc11c \uc804\ub2ec\ud558\uace0 \uc788\ub294 \ub370\uc774\ud130\uac00 \ud655\uc778\ub429\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                      \/\/MemberItem.js\nimport '.\/MemberItem.css';\nimport ItemThumb from '.\/ItemThumb';\nimport ItemDesc from '.\/ItemDesc';\nconst MemberItem = (props) => {\n\tconsole.log(props);\n\treturn (\n\t\t<ul className='list_body'>\n\t\t\t<li className='list_item'>\n\t\t\t\t<ItemThumb thumb={props.thumb} \/>\n\t\t\t\t<ItemDesc name={props.name} email={props.email} \/>\n\t\t\t<\/li>\n\t\t<\/ul>\n\t);\n};\nexport default MemberItem;\n<\/code><\/pre>\n
                        \n
                      1. \uc5ec\uae30\uae4c\uc9c0 \uc791\uc131\uc2dc \uc774\uba54\uc77c\uc740 \ub80c\ub354\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                        \"\"<\/p>\n
                        3.5. ItemDesc.js<\/strong><\/h3>\n
                          \n
                        1. itemDesc \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c props\ub97c \ud655\uc778\ud574\ubd05\uc2dc\ub2e4.<\/li>\n
                        2. \uc804\ub2ec\ub418\ub294 \ub370\uc774\ud130\ub97c \ud655\uc778\ud6c4 email \uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/li>\n
                        3. \ucd5c\uc0c1\uc704 \uc694\uc18c\ub294 \ud55c\uac1c\ub9cc \ubc18\ud658\ud574\uc57c \ud558\ubbc0\ub85c \ube48 \ud0dc\uadf8\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                          \/\/ItemDesc.js\nimport '.\/ItemDesc.css';\n\nconst ItemDesc = (props) => {\n\tconsole.log('\uc5ec\uae30\ub294 ItemDesc', props);\n\treturn (\n\t\t<>\n\t\t\t<div className='list_desc'>\n\t\t\t\t<span className='title'>\uc774\ub984<\/span>\n\t\t\t\t<span className='text'>{props.name}<\/span>\n\t\t\t<\/div>\n\t\t\t<div className='list_desc'>\n\t\t\t\t<span className='title'>\uc774\ub984<\/span>\n\t\t\t\t<span className='text'>{props.email}<\/span>\n\t\t\t<\/div>\n\t\t<\/>\n\t);\n};\nexport default ItemDesc;\n<\/code><\/pre>\n
                          4. \ubb38\uc81c<\/h2>\n
                          4.1. \ubb38\uc81c1<\/h3>\n
                          \n
                          Info<\/strong>: \ud83d\udca1 item\ubaa9\ub85d\uc744 \ud45c\uc2dc\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud558\uc138\uc694<\/p>\n<\/blockquote>\n
                          4.2. \ubb38\uc81c2<\/h3>\n
                          \n
                          Info<\/strong>: \ud83d\udca1 \uc544\ub798\uc758 \ud45c\uc2dc\ub41c \ubd80\ubd84\uc744 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ubd84\ub9ac\ud558\uc138\uc694<\/p>\n<\/blockquote>\n
                          \"\"<\/p>\n
                          4.3. \ubb38\uc81c3<\/h3>\n
                          \n
                          Info<\/strong>: \ud83d\udca1 App \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub370\uc774\ud130\ub97c \uc0dd\uc131\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc804\ub2ec\ud558\uc138\uc694<\/p>\n<\/blockquote>\n
                          \"\"<\/p>\n
                          4.4. \ud480\uc774<\/h3>\n

                          \n1. App.js \uc218\uc815<\/p>\n
                          import logo from '.\/logo.svg';\nimport MemberItem from '.\/components\/MemberItem';\nfunction App() {\n\tconst MemberDB = [\n\t\t{ id: 'm1', name: '\uae40\uacbd\uc544', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-1.jpg', email: 'abc@defg.com' },\n\t\t{ id: 'm2', name: '\uae40\ub9dd\uace0', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-2.jpg', email: 'efg@defg.com' },\n\t\t{ id: 'm3', name: '\uae40\ubbfc\uc815', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-3.jpg', email: 'hij@defg.com' },\n\t\t{ id: 'm4', name: '\uc724\ud604\uc120', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-4.jpg', email: 'lmn@defg.com' },\n\t\t{ id: 'm4', name: '\uc774\uc18c\uc815', thumb: 'http:\/\/qwerew.cafe24.com\/images\/pet-5.jpg', email: 'opq@defg.com' },\n\t];\n\treturn (\n\t\t<div className='App'>\n\t\t\t<img src={logo} className='App-logo' alt='logo' style=100px \/>\n\t\t\t<MemberItem db={MemberDB} \/>\n\t\t<\/div>\n\t);\n}\n\nexport default App;\n<\/code><\/pre>\n
                          <\/Accordion>
                          \n1. MemberItem \ucef4\ud3ec\ub10c\ud2b8 \uc791\uc131
                          \n1. \ucf58\uc194\ucc3d\uc5d0 props\ub97c \ucd9c\ub825\ud574\ubcf4\uba74 App\uc5d0\uc11c \uc804\ub2ec\ud558\ub294 db\uc758 \uac12\uc774 \ubc30\uc5f4\ub85c \uc804\ub2ec\ub418\ub294\uac83\uc744 \uc54c\uc218 \uc788\uc2b5\ub2c8\ub2e4.
                          \n1. \ubc30\uc5f4 \uc774\ubbc0\ub85c \uac01 \uc694\uc18c\uc758 \uc778\ub371\uc2a4 \ubc88\ud638\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc778 MemberItemList \ub85c \ub370\uc774\ud130\ub97c \ubd84\ub9ac\ud558\uc5ec \uc804\ub2ec\ud569\ub2c8\ub2e4.<\/p>\n
                          import '.\/MemberItem.css';\nimport MemberItemList from '.\/MemberItemList';\nconst MemberItem = (props) => {\n\tconsole.log('MemberItem', props.db);\n\n\treturn (\n\t\t<ul className='list_body'>\n\t\t\t<MemberItemList id={props.db[0].id} thumb={props.db[0].thumb} name={props.db[0].name} email={props.db[0].email} \/>\n\t\t\t<MemberItemList id={props.db[1].id} thumb={props.db[1].thumb} name={props.db[1].name} email={props.db[1].email} \/>\n\t\t\t<MemberItemList id={props.db[2].id} thumb={props.db[2].thumb} name={props.db[2].name} email={props.db[2].email} \/>\n\t\t\t<MemberItemList id={props.db[3].id} thumb={props.db[3].thumb} name={props.db[3].name} email={props.db[3].email} \/>\n\t\t\t<MemberItemList id={props.db[4].id} thumb={props.db[4].thumb} name={props.db[4].name} email={props.db[4].email} \/>\n\t\t<\/ul>\n\t);\n};\nexport default MemberItem;\n<\/code><\/pre>\n
                          \n
                          \uc704\uc758 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc774 \uc218\uc815\ud560\uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
                          import '.\/MemberItem.css';\nimport MemberItemList from '.\/MemberItemList';\n11 - (05_540).jpg;\nconst MemberItem = (props) => {\n\tconsole.log('MemberItem', props.db);\n\n\treturn (\n\t\t<ul className='list_body'>\n\t\t\t{props.db.map((item) => {\n\t\t\t\treturn <MemberItemList key={item.id} id={item.id} thumb={item.thumb} name={item.name} email={item.email} \/>;\n\t\t\t})}\n\t\t<\/ul>\n\t);\n};\nexport default MemberItem;\n<\/code><\/pre>\n
                          map() \ud568\uc218\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ub0b4\uc7a5\ud568\uc218\ub85c \ubc30\uc5f4\uc758 \uc694\uc18c\ub97c \ud55c\ubc88\uc529 \uc21c\ud68c\ud558\uc5ec \uc2e4\ud589\ud55c\ud6c4 \uc0c8 \ubc30\uc5f4\ub85c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n
                          \"\uc2e4\ud589\ud654\uba74\"
                          \n<\/Accordion><\/p>\n
                          \n
                          \n
                          Info<\/strong>: \ud83d\udca1 key<\/code><\/p>\n<\/blockquote>\n
                            map \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uba74 \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubc18\ubcf5 \ud558\uc5ec \uc5ec\ub7ec\ubc88 \ub9cc\ub4e4\uc218 \uc788\uc2b5\ub2c8\ub2e4.
                          \n  \uc774\ub54c react \uc5d0\uc11c \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc2dd\ubcc4\ud560\uc218 \uc788\ub294 \uace0\uc720\uc758 \uc2dd\ubcc4\uc790\uac00 \ud544\uc694\ud55c\ub370 \uc774\uac83\uc744 key \uc18d\uc131\uc73c\ub85c \uc9c0\uc815\ud569\ub2c8\ub2e4.
                          \n  key \uc18d\uc131\uc744 \uc791\uc131\ud558\uc9c0 \uc54a\uac70\ub098 key\uc758 \uac12\uc774 \uc911\ubcf5\ub420 \uacbd\uc6b0 \uc5d0\ub7ec \uba54\uc2dc\uc9c0\uac00 \ud655\uc778\ub429\ub2c8\ub2e4.<\/p>\n
                          \"\"<\/p>\n
                            \ud0a4\uac12\uc774 \uc911\ubcf5\ub418\uc5c8\uc744 \uacbd\uc6b0 \uc624\ub958 \uba54\uc2dc\uc9c0<\/p>\n","protected":false},"excerpt":{"rendered":"
                          1. \ub9ac\uc561\ud2b8 props 1.1. \ub370\uc774\ud130\uc758 \ub3d9\uc801\ucd9c\ub825 \ub9ac\uc561\ud2b8\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud558\ub294 \ubb38\ubc95\uc744 JSX(JavaScript XML: Javascript\uc5d0 XML\uc744 \ucd94\uac00\ud55c \ud655\uc7a5\ud55c \ubb38\ubc95) \ub77c\uace0 \ud569\ub2c8\ub2e4. jsx \uc5d0\ub294\u00a0{}\u00a0\uae30\ud638 \uc548\uc5d0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub97c \uc791\uc131\ud558\uba74 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud560\uc218 \uc788\uc2b5\ub2c8\ub2e4. MemberItem \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud558\uace0 \uc788\ub294 \ub370\uc774\ud130\ub97c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ud45c\ud604\uc2dd\uc73c\ub85c \ubcc0\uacbd\ud558\uc5ec \uc791\uc131\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4 1.1.1. \uc791\uc131 components\/MemberItem.js \ub97c \uc218\uc815\ud569\ub2c8\ub2e4. \/\/MemberItem.js import ".\/MemberItem.css"; const MemberItem = () => { const member = … \ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-156","post","type-post","status-publish","format-standard","hentry","category-react-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=156"}],"version-history":[{"count":1,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":163,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/156\/revisions\/163"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}