React 기초 (2) : 컴포넌트 기본 3

javascipt의 map 메소드를 이용해서 동적으로 컴포넌트를 다뤄보자

 

import React from "react";

function Food(props) {
  return (
    <div>
      <h1>I love {props.fav}</h1>
      <img src={props.image} alt=""></img>
    </div>
  );
}

const like = [
  {
    id: 1,
    name: "kimchi",
    image:
      "https://www.tablefortwoblog.com/wp-content/uploads/2019/04/homemade-kimchee-recipe-photos-tablefortwoblog-1.jpg"
  },
  {
    id: 2,
    name: "meetpie",
    image:
      "https://images.food52.com/Xte9FMII0hGFiGIiOca4GoKmShc=/1200x1200/52ce0718-a180-483d-967c-4cccd55b884a--meat_pie_close.JPG"
  },
  {
    id: 3,
    name: "bread",
    image:
      "https://assets.bonappetit.com/photos/5c62e4a3e81bbf522a9579ce/master/pass/milk-bread.jpg"
  }
];

function App() {
  return (
    <div className="container">
      {like.map(food => (
        <Food key={food.id} fav={food.name} image={food.image} />
      ))}
    </div>
  );
}

export default App;

 

여기서 설명할 것은

 

1. 컴포넌트 내부에서 {} 안에서 JS가 작동할 수 있다는 것

2. 리스트를 컴포넌트에 쓸 때는 유니크한 식별자를 붙여야 한다는 것

3. 그래서 App 컴포넌트에 key 값을 줬다는 것

 

 

사실 위와 같은 방법말고 화살표 함수를 독립시켜서 따로 함수를 만들어 주는 방법도 있다.

function renderFood(food) {
  return <Food fav={food.name} image={food.image} />;
}

function App() {
  return <div class="container">{like.map(renderFood)}</div>;
}

 

이런 식으로. 다만 함수가 많아지는 것은 지야해야 하기 때문에 처음의 방법이 일반적인 견해에선 더 낫다고 할 수 있다.

 

map 메소드를 알아보자.

array = [1, 3, 5, 7];
array.map(putwhatever => putwhatever + " number is awesome")

 

이런 모양새다. map 메소드 내부에 함수를 줘야한다.

이 함수는 배열 내부의 인자들을 하나씩 돌려가며 내용을 처리한다.