React PropTypes 사용법: #2.4 Protection with PropTypes

이 글은, 노마드코더의 "ReactJS로 영화 웹 서비스 만들기"를 공부한 내용을 수강자 입장에서 필기한 것으로, 
다소 불친절한 설명이 있을 수 있음을 미리 알립니다.

우리가 보낸 component 인자가 제대로 전달되었는지 확인하는 방법

1. List에 rating항목을 추가한다.

const foodILike = [
  {
    id: 1,
    name: "Kimchi",
    image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg",
    rating: 5,
  },
  {
    id: 2,
    name: "Samgyeopsal",
    image: "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg",
    rating: 4.9,
  },
  {
    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: 4.7,
  },
  {
    id: 4,
    name: "Doncasu",
    image: "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg",
    rating: 4.3,
  },
  {
    id: 5,
    name: "Kimbap",
    image: "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg",
    rating: 3.9,
  },
];

2. prop types 설치

npm i prop-types

3. import PropTypes

import PropTypes from "prop-types";

3. List 생성

Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.string.isRequired, // -> rating: PropTypes.number.isRequired,
};

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

4. 결과

5. isRequired가 없으면, 태그가 아예 존재하지 않을 때, 에러 메세지를 보내지 않음. 즉 undefined 가능.