jineecode
Protection with PropTypes 본문
내가 전달받은 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