prototype을 통해 객체 타입을 검사하기

 npm i prop-types 콘솔창 입력을 통하여 설치

<pakeage.json>에 "prop-types": "^version_num"을 통해 확인

 

 

const foodILike = [
  {
    id: 1,
    name: "Kimchi",
    image:
      "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg",
    rating: 5
  }
  ];

name,picture:string, rating: number 

 

1) Food라는 객체가 있다.

name,picture:string, rating: number 로 받기 위해 

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

2) 객체명.prototype = { } 코드를 작성한다.

Food.prototype = { //객체 검사할때 사용하는 코드 , console에서는 확인할 수 있다.
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired
}

만약, rating에 number 대신 string이 온다면 콘솔창을 통해 에러를 확인할 수 있다. 

 

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