Nomadcoders 리액트 강의중에 정리를 위해 포스팅하며, 예제의 출처는 Nomadcoders 리액트 2주 완성 챌린지 입니다.

prop-types

prop-types는 타입을 확인하기위한 라이브러리이다.
설치를 위해 npm에서 확인한 결과 다운로드 수가 어마어마하다.

설치

npm install --save prop-types

사용법

prop-types를 import하고, (조금 복잡한)예제로 사용법을 보자.

// import 
import PropTypes from 'prop-types';


//예제
const PricesPresenter = ({ loading, prices }) =>
  loading ? (
    <Loader />
  ) : (
    prices.map(price => <Price key={price.id} {...price} />)
  );

PricesPresenter.propTypes = {
  loading: PropTypes.bool.isRequired,
  prices: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      symbol: PropTypes.string.isRequired,
      quotes: PropTypes.shape({
        USD: PropTypes.shape({
          price: PropTypes.number.isRequired
        }).isRequired
      }).isRequired
    }).isRequired
  ).isRequired
};

복잡한 타입정의, shape

PropTypes 객체는 복잡한 타입 정의를 위해 shape(), arrayOf(), oneOf(), instanceOf()와 같은 고급 검증자들도 제공한다.

예제의 shape()는 일일히 타입을 정의하기위해, arrayOf()는 배열 props를 데이터로 가져야할 때 사용한다.

에러

타입이 일치하지 않은 경우 아래와 같은 경고가 출력되며, 경고는 개발 모드에서만 출력되기 때문에 실제 사용자에게는 아무 영향을 주지 않는다.

Warning: Failed prop type: Invalid prop `name` of type `string` supplied to `PricesPresenter`, expected `number`.