[한국어,EN] React Type Check with prop-types

Reading time ~1 minute

1. React Type Check with prop-types

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

2. 예제(Example)

<WrappedComponent title="title" subheader="subheader" avatar={<Face />}>
  {"Hello World"}
</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)

import PropTypes from "prop-types";

WrappedComponent.propTypes = {
  children: PropTypes.node,
  avatar: PropTypes.element,
  title: PropTypes.string,
  subheader: PropTypes.string
};

4. 참고(Reference)

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

[한국어, EN] React Native import 환경 설정(import setting)

* [1. 프로젝트 구조(Project Structure)](#1-프로젝트-구조project-structure)* [2. 동작 안하는 예제(Not work example)](#2-동작-안하는-예제not-work-example)* [3. 동작 하는...… Continue reading