리액트 PropTypes 인식 불가 에러

static propTypes = {
     title: React.PropTypes.string // Error!
}

위와 같이 리액트 안에서 Prop 타입을 정해주려 하면 아래와 같은 에러가 출력된다.

Movie.js:6 Uncaught TypeError: Cannot read property 'string' of undefined
    at Module../src/Movie.js (Movie.js:6)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/App.js (App.css?4433:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/index.js (index.css?f3f6:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (serviceWorker.js:141)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

그리고 위와 관련하여 리액트 공식 문서에서는 다음과 같이 표기되어 있다.

---

주의

React.PropTypes는 React v15.5부터 다른 패키지로 이동하였습니다. 대신 prop-types 라이브러리를 사용하시길 바랍니다.

우리는 변환을 자동화하기 위하여 codemod 스크립트를 제공하고 있습니다.

---

따라서 새 라이브러리인 ‘prop-types‘ 를 다운받으면 된다. 

터미널에 아래와 같이 입력하자

npm add prop-types

yarn 프로그램을 사용할 경우

yarn add prop-types 

설치를 완료하였으면

import PropTypes from 'prop-types';

prop-types를 import시키고 그 동안 React 라이브러리에서 호출하던 PropTypes 모듈을 prop-types 패키지를 통해 호출하도록 바꿔주면 된다.

static propTypes = {
     title: PropTypes.string // Success
}

이제 undefined 에러가 뜨지 않으면 성공!

평점