jineecode

Protection with PropTypes 본문

JS/react

Protection with PropTypes

지니코딩 2021. 2. 11. 16:47

내가 전달받은 props가 내가 원하는 prop인지 확인하는 도구.

 

터미널에

 

npm i prop-types

 

를 해준다.

 

잘 설치됐는지 확인하는 방법은 package.json 파일에서

prop-types 가 있는지 확인한다.

 

 

 

본격적으로 prop를 검사하는 코딩을 넣어 확인해보자.

 

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

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",
    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.8
  },
  {
    id: 4,
    name: "Doncasu",
    image:
      "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg",
    rating: 5.5
  },
  {
    id: 5,
    name: "Kimbap",
    image:
      "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg",
    rating: 4.7
  }
];

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

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

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

export default App;

rating은 number이기 때문에 에러창이 나온다.

 

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

number로 바꿔주면 에러가 사라진다.

 

 

required를 붙혀주지 않으면 에러를 안 띄움.

'JS > react' 카테고리의 다른 글

componentDidMount() 응용.  (0) 2021.02.11
class component  (0) 2021.02.11
JSX + Props  (0) 2021.02.11
react of component  (0) 2021.02.11
react의 골격  (0) 2021.02.11
Comments