import React from "react";

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

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

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

export default App;

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

코드를 이렇게 화살표 함수로 바꿀수가 있다.

그런데 뭔가.. 더 코드를 간략하게 할수 있을것 같다 .

const Food = ({ name, picture }) => (
  <div>
    <h1>I like {name}</h1>
    <img src={picture} alt={name} />
  </div>
);

이렇게 좀더 간략하게 할수가있었다 .

하지만 이게 맞는지 잘 모르겠다 .
코드를 무작정 간략하게 한다고 해서 좋은것이 아닌것 같다 .
간략하게 해도 가독성이 중요한것 같다 .

props 확인방법

만약에

<Food key={dish.id} name={dish.name} picture={dish.image} />

부분에서 dish.id 라던지 dish.name , dish.image
에서 하나라도 image 라던지 name 이라던지 값이 존재하지 않게 된다면 ??

이미지가 없게 되면 깨져서 나오고 , name 이 없다면 글이 안보이게 된다 .

그래서 우리는 이것을 항상 점검할 필요가 있다 .

father component 로 부터 전달받은 props 가 예상했던 props 가 맞는지 확인하고 값이 있는지 확인을 해야한다.

npm i prop-types
설치를 해준다.

package.json
파일을 열고 
  "dependencies": {
    "prop-types": "^15.7.2",

이렇게 추가 된것을 볼수가 있다 .

그리고 나서
App.js
로 가서 import 추가를 해준다.

import PropTypes from "prop-types";


....

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

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

프로토타입 을 지정해주면 된다 .

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

만약 여기서
rating:PropTypes.string.isRequired
를 하게 된다면 에러가 발생하게 된다.