[React] 노마드 수업 1- 소스

과일 보여주는 예제 소스

import React from 'react';
import PropTypes from "prop-types";

const foodILike = [
  {
    id: 1,
    name: "apple",
    image: "https://i.pinimg.com/564x/9e/10/13/9e1013ce992236f9a7b4eb1100d53ef8.jpg",
    rating: 5
  },
  {
    id: 2,
    name: "banana",
    image: "https://i.pinimg.com/564x/a5/0c/e6/a50ce6c1cef934d3b1eb3a5b78afc206.jpg",
    rating: 4
  },
  {
    id: 3,
    name: "watermelon",
    image: "https://i.pinimg.com/564x/1a/0c/92/1a0c92567806860be57ecdab4bce93fa.jpg",
    rating: 3.5
  },
]

function Food({ foodname, picture, foodrating }) {
  return (
    <div>
      <h2>I like {foodname}</h2>
      <h3>{foodrating}/5.0</h3>
      <img src={picture} alt={foodname} />
    </div>
  )
}

Food.propTypes = {
  foodname: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  foodrating: PropTypes.number
};

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

export default App;