[노마드코더/ReactJS로 영화 웹 서비스 만들기]2.2 Dynamic Component Generation

2.2 Dynamic Component Generation

• map: array의 각 item에 function을 적용 후, 그 result로 array를 반환

import React from 'react';

function Food({ob,picture}){   

  return <div>
    <h2>I like {ob}</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 => <Food ob={dish.name} picture={dish.image}/>)}
    </div>

  );
}
//dish는 object로 foodILike의 item을 차례대로 가져옴
//=> : 각각의 item 차례가 오면 자동으로 return 역할 
//Food 함수의 인자인 ob로 들어갈 것은 dish.name으로 foodILike의 item들 중 name만 내보냄
//Food 함수의 인자인 picture로 들어갈 것은 dish.image으로 foodILike의 item들 중 image만 내보냄


export default App;