react.js로 영화 웹 서비스 만들기 -3 [prop.types로 검사하기]

복습도 할 겸 전체 다 코드로 쳐보자.

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

const foodApi = [
  {
    index :1,
    name : "kimchi",
    link : "http://image.dongascience.com/Photo/2016/11/14787526584108[1].jpg"
  },
  {
    index : 2,
    name : "kkakdugi",
    link : "https://shop.hansalim.or.kr/im/is/activeDesigner/100101004_content1.jpg"
  }
]

function Food({name, image}) {
  return (
    <div>
      <h1>{name}</h1>
      <img src={image} alt={name} />
    </div>
  )
}

                                               // Food 컴포넌트에 대해서 타입 검사를 한다. & 사람의 실수를 예방한다.
Food.propTypes = {                             // 소문자 대문자 사용에 유의하자.
  name : PropTypes.string.isRequired,
  link : PropTypes.string.isRequired
}

function App() {
  return (
    <div>
      {/* data와 food의 형식을 섞어서 내보낸다. index.js에서는 <App /> 을 받아드리고 있기 때문에 이게 적합하다.*/}
      {foodApi.map(dish => {
        return <Food key = {dish.index}
                     name = {dish.name}
                     image = {dish.link}
                     />
      })}
    </div>
  )
}

export default App;