[React] Dynamic Component Generation (다이나믹 컴포넌트 만들기)

Map

• array 내 item이 갖는 결과값을 array 형태로 준다. 
• array.map(function(current) {
  console.log(current);
  return 0
  }
  • [0, 0, 0, 0] 출력
• friends.map(function(friend) {
  return friend + "🥰";
  })
  • 친구 이름 + 🥰를 갖는 array 출력

출처

https://nomadcoders.co/react-fundamentals/lectures/1549

All Courses – Nomad Coders

코드

import React from 'react';

function Food({name, picture}) {
  return <div>
    <h2>I like {name}</h2>
    <img src={picture} />
  </div>
}

const foodILike =[
  {
    name: "Kimchi",
    image:
      "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
  },
  {
    name: "Samgyeopsal",
    image:
      "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg"
  },
  {
    name: "Bibimbap",
    image:
      "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"
  },
  {
    name: "Doncasu",
    image:
      "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
  },
  {
    name: "Kimbap",
    image:
      "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg"
  }
]

function App() {
  return (
    <div>
      {foodILike.map(dish => (  // dish : object (name, string을 가짐)
        <Food name={dish.name} picture={dish.image} /> 
      ))}
    </div>
  );
}
export default App;