<aside> 💡 컴포넌트가 전달받은 props가 정말 내가 원하는 값인지 확인해주는 것

</aside>

prop-types 설치

$ npm install prop-types

App.js

• Food.propTypes를 입력할때, PropTypes라고 입력하면 오류가 남 → propTypes로 입력하기

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

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

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

Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number
}

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

export default App;