React에서의 proptypes validation

 

 

React의 React.PropTypes가 15.5 버젼 이후로 deprecate 되면서, proptypes validation을 위해서는 라이브러리를 따로 불러와야 할 필요가 생겼다.

 

 

기존의 React.PropTypes의 경우 다음과 같이 사용했다.

static propTypes = {
	value: React.PropTypes.string
}

 

 

그러나 지금 버젼의 리액트에서 이렇게 사용하면, 콘솔창에 아래와 같은 오류메시지가 뜨며 prop-types 라는 npm 모듈을 사용할 것을 권장한다.

React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead react/no-deprecated

 

 

따로 분리된 proptpyes를 사용하기 위해 npm 명령어를 통해 라이브러리를 설치해주자.

npm install -save prop-types

 

 

파일의 헤더 부분에 import를 해주고,

import PropTypes from 'prop-types';

 

 

원하는 propTypes를 선언해준다.

static propTypes = {
    value: PropTypes.string
}

 

 

 

 

 

- 또 다른 방법

 

이 과정을 하던중 실수로 이름이 비슷한 다른 npm 모듈을 설치했었는데, 사용법이 크게 다르지 않아 함께 작성해본다.

npm install -save proptypes

 

파일의 헤더 부분에 ReactPropTypes를 다음과 같이 import 해주고,

import ReactPropTypes from "proptypes/src";

 

아래와 같이 사용하니까 처음 의도했던대로 잘 실행되었다.

static propTypes = {
    value: ReactPropTypes.string
}

 

물론 .isRequired 같은 것도 정상적으로 작동한다.

 

 

 

 

이 외의 propTypes에 대한 자세한 공식문서에서 확인할 수 있다.

https://reactjs.org/docs/typechecking-with-proptypes.html

Typechecking With PropTypes – React