1. React Type Check with prop-types

React Component 를 만들다가 type 을 체크해야 할 필요성을 느꼈다.(I felt that check the type of react component)

2. 예제(Example)

Copycopy code to clipboard
1<WrappedComponent title="title" subheader="subheader" avatar={<Face />}>
2  {"Hello World"}
3</WrappedComponent>

커스텀 컴포넌트를 만드는데 avatar prop 에는 꼭 component 를 받아야하고 children props 에는 아무거나 받아도 상관없는 타입체크를 하고 싶다.
(To create a custom component, I need to get a component type in the avatar prop and to get anything in children prop)

3. 코드(Code)

Copycopy code to clipboard
1import PropTypes from "prop-types";
2
3WrappedComponent.propTypes = {
4  children: PropTypes.node,
5  avatar: PropTypes.element,
6  title: PropTypes.string,
7  subheader: PropTypes.string,
8};

4. 참고(Reference)

• https://reactjs.org/docs/typechecking-with-proptypes.html
• https://www.npmjs.com/package/prop-types