# 2.2 Dynamic Component Generation #2.3 map Recap

이 글은, 노마드코더의 "ReactJS로 영화 웹 서비스 만들기"를 공부한 내용을 수강자 입장에서 필기한 것으로, 
다소 불친절한 설명이 있을 수 있음을 미리 알립니다.

Array.Map

• map은 function을 취해서 각 아이템에 적용해.

friends = ["dal", "mark", "lynn", "japan guy" ]
friends.map(function(current) {console.log(current);
return 0 }) 
friends.map(current => {console.log(current);
return 0 }) 
위 두 문장은 같은 동작을 수행함.

friends = [0, 0, 0, 0]

current = current object. friends의 첫 번째 object부터 소환.

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",
  },
];
// array.map(function(current) {console.log(current);
//  return 0 })
// map은 function을 취해서 각 아이템에 적용해.
function App() {
  return (
    <div>
      <h1>Hello!!</h1>
      {foodILike.map((dish) => (
        <Food name={dish.name} picture={dish.image} />
      ))}
    </div>
  );
}

export default App;

2.3. Map Recap

function renderFood(dish) {
  console.log(dish);
  return <Food name={dish.name} picture={dish.image} />;
}

function App() {
  return (
    <div>
      <h1>Hello!!</h1>
      {foodILike.map(renderFood)}
    </div>
  );
}

위와 같이 코드를 바꿔도 결과값이 같다.

오류 해결하기 : Each child in a list should have a unique "key" prop.

• 각 Array 요소에 id값을 주고, App 실행시 인자로 id값을 전달해준다. 리스트의 각 요소는 unique한 key prop를 가져야 하기 때문이란다.

const foodILike = [
  {
    id: 1,
    name: "Kimchi",
    image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg",
  },
  {
    id: 2,
    name: "Samgyeopsal",
    image: "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg",
  },
  {
    id: 3,
    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",
  },
  {
    id: 4,
    name: "Doncasu",
    image: "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg",
  },
  {
    id: 5,
    name: "Kimbap",
    image: "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg",
  },
];

function App() {
  return (
    <div>
      <h1>Hello!!</h1>
      {foodILike.map((dish) => (
        <Food key={dish.id} name={dish.name} picture={dish.image} />
      ))}
    </div>
  );
}