component 예제

component 사용하기1

import React from 'react';

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

const foodILike = [
  {
    id: 1,
    name: "pasta",
    image:
      "https://assets.bonappetit.com/photos/5de7e495b79e20000879d72a/1:1/w_2560%2Cc_limit/Amiel-Lobster-Pasta-Lede-1.jpg",
    rating: 5
  },
  {
    id: 2,
    name: "chicken",
    image:
      "https://crcf.cookatmarket.com/product/images/2019/10/loja_1570439904_7109_720.jpg",
    rating: 4.9
  },
  {
    id: 3,
    name: "10cm",
    image:
      "https://img.hankyung.com/photo/202012/01.24801138.1.jpg",
    rating: 4.8
  }
];

function App() {
  return (
    <div>
      {/* dish는 object임! 기억하기!! */}
      {foodILike.map(dish => (
      <Food 
        key={dish.id} 
        name={dish.name} 
        picture={dish.image} 
        rating={dish.rating} 
      />
      ))}
    </div>
  );
}

export default App;

 

 

component 사용하기2

import React from 'react';

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

const foodILike = [
  {
    id: 1,
    name: "pasta",
    image:
      "https://assets.bonappetit.com/photos/5de7e495b79e20000879d72a/1:1/w_2560%2Cc_limit/Amiel-Lobster-Pasta-Lede-1.jpg",
    rating: 5
  },
  {
    id: 2,
    name: "chicken",
    image:
      "https://crcf.cookatmarket.com/product/images/2019/10/loja_1570439904_7109_720.jpg",
    rating: 4.9
  },
  {
    id: 3,
    name: "10cm",
    image:
      "https://img.hankyung.com/photo/202012/01.24801138.1.jpg",
    rating: 4.8
  }
];

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

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

export default App;