[노마드코더/ReactJS로 영화 웹 서비스 만들기]2.3 map Recap

2.3 map Recap

• map은 각각 item별로 function을 호출

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

function App(){
  return (
    <div>
     {foodILike.map(renderFood)}
    </div>

  );
}
//map에 renderFood라는 함수를 인자로 줘서 renderFood 함수에서 별도로 return값을 정의 

• console.log(foodILike.map(renderFood))}
  • error가 뜸
• 이유?
  • 기본적으로 react component
  • react의 item들은 모두 유일해야함
  • 이들을 list안에 집어넣을 떄, 유일성을 잃어버리게 됨
• 해결방법
  • 각각의 item에 id라는 속성을 추가
  • (각각 다른 name과 image를 갖고있지만 react는 똑똑하지 않아서 Food의 prop으로 key를 추가해줌)
• {foodILike.map(dish => <Food key={dish.id} ob={dish.name} picture={dish.image}/>)}
  • key prop은 사용하지 않기 떄문에 Food로 전달되지 않음
  • 오로지 react 내부에서 사용하기 위함

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"
  }
];

• <img src={picture} alt={ob} />
  • alt={prop} -> 시각 장애인들을 위함 , code style에 도움을 줌