- 유효성 검사 및 타입 확인
- 패키지 설치 : npm i prop-types
const foodLike = [
{
id:1,
name: "Home Alone",
image: "https://upload.wikimedia.org/wikipedia/ko/3/31/%EB%82%98_%ED%99%80%EB%A1%9C_%EC%A7%91%EC%97%90_%ED%8F%AC%EC%8A%A4%ED%84%B0.jpg",
rating: 5
},
{
id:2,
name: "Harry Potter",
image: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20151224_170%2Fineedu0810_1450929838016sVnO8_JPEG%2F2015-12-24_12-57-34.jpg&type=sc960_832",
rating:4.9
},
{
id:3,
name: "Charlie and the Chocolate Factory",
image: "https://lh3.googleusercontent.com/proxy/QP1GOFu0XJmAspchl3BiRjZPUzkNS27c9_dYfL1HaiFQjqAvOrN0e0S47WrlpdA7x9Bv7Hfk-AfzjgA3AJfE87whPvqJ9MOR1N0lJ5zP5gfy9qgCKwZxa_ShlFmFVZFuGaSJ",
rating:4.8
}
]
function Food({ name, picture, rating}) {
return (
<div>
<h1>I like {name}</h1>
<h4>{rating}/5.0</h4>
<img src={picture} alt={name} />
</div>
);
}
// 유효성 검사
// isRequired는 필수요소 없으면 필수는 X , PropTypes.(데이터타입)
Food.propTypes = {
name: PropTypes.string.isRequired,
picture: PropTypes.string.isRequired,
rating: PropTypes.number.isRequired
};
▶ Type의 종류
optionalArray: PropTypes.array
optionalBool: PropTypes.bool
optionalFunc: PropTypes.func
optionalNumber: PropTypes.number
optionalObject: PropTypes.object
optionalString: PropTypes.string
optionalSymbol: PropTypes.symbol
optinalUnion: PropTypes.oneOfType([ PropTypes.string,
PropTypes.number, PropTypes.instanceOf(Message)])
# 특정 유형의 배열 (아래는 정수형 배열)
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
# 특정 유형의 속성값을 가진 object( 정수형 데이터를 가지고 있음 )
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
'React' 카테고리의 다른 글
[react] Fetching data( async, await ) (0) | 2021.09.02 |
---|---|
[react] state + component life style (0) | 2021.09.02 |
[react] Key warning (0) | 2021.08.26 |
[react] Components with JSX + Props + 동적데이터 (0) | 2021.08.26 |
[react] 설정 (0) | 2021.08.26 |