PropTypes를 사용한 타입 검사와 Default Props 설정하기

개발 중에 PropTypes이 적용되지 않는 경우가 있어서

PropTypes 사용 방법을 찾아서 정리하였습니다.

 

`prop-types` 라이브러리가 설치되어 있어야 합니다.

prop-types 라이브러리 설치 방법 

npm install prop-types

 

 

동작하지 않던 코드 (Babel Transform 미사용 시)

→ 정확히 얘기하면 Babel Transform(transform-class-properties 등)을 사용하고 있는 경우에만 React 컴포넌트 클래스 내의 정적프로퍼티로 선언 가능 (React 공식 문서 참고)

 

 

동작하는 코드 

Class Component, Function Component 별로 PropTypes 및 DefaultProps 를 지정하는 샘플 코드를 작성하였습니다.

 

1. Class Component 사용 시

2. Function Component 사용 시

 

 

공식 문서 : https://ko.reactjs.org/docs/typechecking-with-proptypes.html#default-prop-values