비슷한 컴포넌트 여러 개 만들기

앞에서 만든 컴포넌트 형태 다시 살펴보기

import React from "react";

function Food({ fav }) {
  return <h1>I love {fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>안녕!!!</h1>
      <Food fav="pasta" />
      <Food fav="ramen" />
      <Food fav="kimbap" />
      <Food fav="bibimbap" />
    </div>
  );
}

export default App;

 

위 App.js 코드는 효율적이지 않습니다.

왜냐하면 새 음식을 추가할 때마다 <Food fav="..." />를 복사해야 하기 때문입니다.
또한, 서버에서 음식 데이터를 받아 출력하는 경우, 음식 데이터의 개수를 알 수 없다면 이 방법은 더 큰 문제가 됩니다.

 

음식 데이터 만들기

서버에서 넘어온 데이터를 저장할 수 있도록 foodLike라는 변수를 만든 다음 빈 배열을 할당합니다.

import React from "react";

function Food({ fav }) {
  return <h1>I love {fav}</h1>;
}

const foodILike = [
  {
    name: "파스타",
    image:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNKuJ29sfo1_gy6jrbo3l0hX8SC8hOJpnqKA&s",
  },
  {
    name: "비빔밥",
    image:
      "https://i.namu.wiki/i/dgjXU86ae29hDSCza-L0GZlFt3T9lRx1Ug9cKtqWSzMzs7Cd0CN2SzyLFEJcHVFviKcxAlIwxcllT9s2sck0RA.jpg",
  },
  {
    name: "라면",
    image:
      "https://i.namu.wiki/i/2mrBrfSDXbBJHLjgyycsAhB0qLvjSZbvswmGtVTAupaEfuQ8Xuzp8wJiXyeDTsqz7blqGRYSjW5mbo1Wc4GP_w.webp",
  },
  {
    name: "초밥",
    image:
      "https://i.namu.wiki/i/vwbKQLdn5CzWLTdLHKb2rYjLZS6icyFb6b6PdEz_3Y_0gJQqRMuhHGgogptO19gl3NZMnRsTvjYlA-0-JRSrbw.webp",
  },
  {
    name: "카레라이스",
    image:
      "https://i.namu.wiki/i/QUSohbmt0G1CuYZKW-skuN5K3HAjf88GgTttXS0EphnSMWN8UkV-nYCb3hCCNNbs2m6pjyNF2MLbdQO8cBy1gA.webp",
  },
]; // foodLike 변수에 베열을 저장함

function App() {
  return (
    <div>
      <h1>안녕!!!</h1>
    </div>
  );
}

export default App;