PropTypes

PropTypes로 타입 확인하기

$ npm i prop-types

 

전달받은 데이터의 유효성을 검증

props에 유효하지 않은 값이 전달되었을 때, 콘솔에 경고문이 출력됨

서비스의 안정성이 높아지므로 귀찮더라도 한번씩 해주는 것을 추천

 

 

사용방법

import PropTypes from 'prop-types';

Food.propTypes={
   name: PropTypes.string.isRequired,
   picture: PropTypes.string.isRequired,
   rating: PropTypes.number
}
//isRequired는 그 props가 반드시 있어야함을 의미

 

PropTypes.object일 경우 더 자세하게 적어줄 수 있음

PostCard.propTypes = {
  post: PropTypes.object,
};

//shape로 구체화할 수 있음 (그 안의 속성들까지)
PostCard.propTypes = {
  post: PropTypes.shape({
    id: PropTypes.number,
    User: PropTypes.object,
    Comments: PropTypes.arrayOf(PropTypes.object),
  }).isRequired,
};

 

 

[References]

ko.reactjs.org/docs/typechecking-with-proptypes.html