<React> prop-types(package)
prop-types라고 하는 package에 대해 알아보겠습니다.
설치
%npm i prop-types
prop-types란?
Runtime type checking for React props and similar objects.You can use prop-types to document the intended types of properties passed to components. React (and potentially other libraries—see the checkPropTypes() reference below) will check props passed to your components against those definitions, and warn in development if they don’t match.
prop-types 공식 문서
Component에 props를 전달하면서 전달해야할 것을 전달하지 않는다던가 type을 헷갈린다던가 할 수 있겠죠. prop-types package는 이러한 상황에서 유용합니다. 잘못된 type의 prop이 전달되거나 전달되야할 prop이 전달되지 않으면 console을 통해 에러를 출력해줍니다.
app.jsx
- name: PropTypes.string.isRequired
Food Component에 전달될 name property는 string type이어야 하며 꼭 있어야 한다는 의미입니다. 꼭 필요하지 않다면 isRequired가 빠지면 됩니다.
- rating: PropTypes.number.isRequired
Food Component에 전달될 rating property는 number type이어야 하며 꼭 있어야 한다는 의미입니다.
import PropTypes from 'prop-types';
function Food({name, src, rating}){
return (
<div>
<h2>I like {name}</h2>
<img src={src} alt={name}>
<span>{rating}</span>
</div>
)
}
Food.propTypes = {
name: PropTypes.string.isRequired,
src: PropTypes.string.isRequired,
rating :PropTypes.number.isRequired
}
Author And Source
이 문제에 관하여(<React> prop-types(package)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@since-1994/React-prop-typespackage저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)