[React] Protection with PropTypes

1. foodILike list에 rating 추가
2. terminal > npm i prop-types (설치)
3. package.json > dependencies > prop-types가 있으면 설치 완료!
4. prop-types : 우리가 원하는 component가 맞는지 확인 시켜준다.
5. App.js > import PropTypes from "prop-types";
6. App.js > Food.propTypes 정보 추가 (type, required 여부)

참고

https://ko.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 확인 – React

출처

https://nomadcoders.co/react-fundamentals/lectures/1551

All Courses – Nomad Coders

코드

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

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

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

const foodILike =[
  {
    id: 1,
    name: "Kimchi",
    image:
      "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg",
    rating: 4
  },
  {
    id: 2,
    name: "Samgyeopsal",
    image:
      "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg",
    rating: 5
  },
  {
    id: 3,
    name: "Bibimbap",
    image:
      "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb",
    rating: 3.7
  },
  {
    id: 4,
    name: "Doncasu",
    image:
      "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg",
    rating: 3.5
  },
  {
    id: 5,
    name: "Kimbap",
    image:
      "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg",
    rating: 5
  }
]

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

https://github.com/grace-kimm/movie_app_2020/commit/7510806a0a4873a928f67671abbd848ec12ab9da

#2.4 Protection with PropTypes · grace-kimm/movie_app_2020@7510806