React 기초 - 동적 Component 생성

function Food({ name, url }) {
  return (
    <div>
      <h2>I love {name}</h2>
      <img src={url} />
    </div>
  );
}

• 위와 같은 Componet가 있다고 하자.

function App() {
  return (
    <div>
      <Food name="Kimch" url="https://cdn.imweb.me/thumbnail/20200415/6b6e035658bac.png"/>
      <Food name="Boolgogi" url="https://recipe1.ezmember.co.kr/cache/recipe/2016/12/30/df939769792632a48a0eba8bc895e8601.jpg"/>
      <Food name="Bibimbap" url="https://mblogthumb-phinf.pstatic.net/MjAxODAxMTJfMjYx/MDAxNTE1NzU4NzAwNTg4.Lsx-fZIBLlgOhZ2-qwhtbHJK_FOeO31_atllv97UZtsg.31b2NDz23pXmeX-oQBx56rkMg_yQuASMVRZzaYq54UIg.JPEG.mh950621/b-48f.jpg?type=w800"/>
    </div>
  );
}

• 해당 Componet를 활용할 때 위와 같이 복사-붙여넣기의 방식의 작업은 효율적이지 못하다.
• 우리는 실제 코딩작업을 할 때 특정 데이터를 불러오는 경우가 많다. 즉, 데이터도 동적으로 변화할 수 있다는 것이다. 따라서 복사-붙여넣기 방식을 사용할 수도 없다.
• 따라서 동적으로 Compnent를 만들 필요가 있다.

---

동적 Componet 생성 (by. map)

const foodILike = [
  {
    name: "Kimchi",
    image:
      "https://cdn.imweb.me/thumbnail/20200415/6b6e035658bac.png"
  },
  {
    name: "Boolgogi",
    image:
      "https://recipe1.ezmember.co.kr/cache/recipe/2016/12/30/df939769792632a48a0eba8bc895e8601.jpg"
  },
  {
    name: "Bibimbap",
    image:
      "https://mblogthumb-phinf.pstatic.net/MjAxODAxMTJfMjYx/MDAxNTE1NzU4NzAwNTg4.Lsx-fZIBLlgOhZ2-qwhtbHJK_FOeO31_atllv97UZtsg.31b2NDz23pXmeX-oQBx56rkMg_yQuASMVRZzaYq54UIg.JPEG.mh950621/b-48f.jpg?type=w800"
  }
];

• 위와 같은 데이터를 동적으로 받아왔다고 가정하자.
• 해당 데이터에 map을 사용해 동적으로 Componet를 생성할 수 있다.

function App() {
  return (
    <div>
      {foodILike.map(food => (
        <Food name={food.name} picture={food.image} />
      ))}
    </div>
  );
}

• map은 array의 각 item마다 function을 실행할 수 있도록 도와주는 function이다.
• 해당 결과에 대한 array을 리턴값으로 준다.
• 따라서 이를 활용하면 동적인 Componet 생성이 가능해지는 것이다.