App.js

• 데이터가 백엔드에서 넘어온다고 생각하고 const foodLike 만들기
• map 함수를 통해 props 만들어서 전달하기

import React from 'react';

function Food( { name, picture } ) {
  return (
    <div>
      <h1>I like { name }</h1>
      <img src={ picture } />
    </div>
  );
}

const foodLike = [
  {
    name: 'Kimchi',
    image: '<https://w.namu.la/s/a85e178b2233fa1e3461ae51dba6757e8cc87b215ea326660c85904f61daf0dcd84f8b8733cee71ca34fa743822d5aa1650766f6b2a90118edc5e76974e8305263694a4c2358508602ad7694e2cd022389545b2812f6e86bf29e05e172b53405>',
  },
  {
    name: 'Samgyeopsal',
    image: '<https://cdn.mindgil.com/news/photo/202103/70839_7148_1250.jpg>'
  }
];

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

export default App;

• 결과물

ID와 alt 추가

• 각 정보에 id값 추가
• image에 alt값 추가

import React from 'react';

function Food( { name, picture } ) {
  return (
    <div>
      <h1>I like { name }</h1>
      <img src={ picture } alt={ name } />
    </div>
  );
}

const foodLike = [
  {
    id: 1,
    name: 'Kimchi',
    image: '<https://w.namu.la/s/a85e178b2233fa1e3461ae51dba6757e8cc87b215ea326660c85904f61daf0dcd84f8b8733cee71ca34fa743822d5aa1650766f6b2a90118edc5e76974e8305263694a4c2358508602ad7694e2cd022389545b2812f6e86bf29e05e172b53405>',
  },
  {
    id: 2,
    name: 'Samgyeopsal',
    image: '<https://cdn.mindgil.com/news/photo/202103/70839_7148_1250.jpg>'
  }
];

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

export default App;