- PropTypes를 통해서 리액트 개발환경에서 타입을 체크할 수 있다.
-
PropTypes는 React v15.5부터 분리되어 따로 설치가 필요해졌다.
npm i prop-types
-
타입스크립트를 사용하지않아도 리액트는 타입을 검사하는 방법을 가지고 있는데 이것이 바로 PropTypes이다.
-
propTypes는 성능상의 문제로 개발 모드에서만 작동한다.
import PropTypes from 'prop-types';
컴포넌트이름.propTypes = {
videoUrl: PropTypes.object,
setState: PropTypes.func,
pictureUrl: PropTypes.string.isRequired
};
-
isRequired를 설정하여 반드시 필요한 데이터도 설정할 수 있다.
-
array, func, bool, object, number, string 등의 타입 검사가 가능하다.
-
PropTypes.any를 통해서 어떤 타입이 와도 검사를 통과하게 할 수 있다.
컴포넌트이름.defaultProps = {
pictureUrl: '기본_사진_주소'
};
-
defaultProps를 설정하여 초기값을 설정할 수도 있다.
-
PropTypes.checkPropTypes 메서드를 통해서 수동으로 유효성 검사를 할 수 있다.
🥞 PropTypes를 설정하고 만약 타입에 에러가 있음이 발견되면, 브라우저 콘솔창에 Warning 메세지를 확인할 수 있다.
참고 자료 출처 : https://ko.reactjs.org/docs/typechecking-with-proptypes.html, https://www.npmjs.com/package/prop-types
🙌🙌🙌🙌