[ React ] TypeChecking PropTypes 적응하기

React PropTypes

리액트 TypeChecking PropTypes를 정리하기위해 사이트를 참조하였습니다.

리액트 앱이 커지면서 여러 유형 검사를 통해 많든 버그들을 발견 할 수 있게되었습니다. 

일부 응용 프로그램인 TypeScript나 Flow와 같은 자바스크립트 확장 응용 프로그램으로도 검사를 할 수 있습니다. 하지만, 리액트 자체적으로도 TypeChecking 기능을 내장하고 있습니다. 또한 리액트  PropTypes를 통해 버그만 잡는 것이 아닌 가독성향상 및 커스텀화로 중요성이 커지고 있습니다. 

지금부터 예제를 통해서 하나씩 설명해 보도록 하겠습니다.

알아두어야 하는 내용

React.Proptypes는 15.5버전 부터 다른패키지로 옮겼습니다.
prop-types 라이브러리를 사용 할 것입니다.
CDN사용 : https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js 

propTypes 예제

상단의 예제에서 props데이터를 검증하는 구간은 Test.propTypes입니다.

사용 방법 예제를 만들어보겠습니다.

예제내용을 한개씩 살펴보겠습니다. 

1. 데이터 타입을 잘못 넣었을때

PropTypes.string.isRequired

props 값이 문자열이고, 필수 값이라는 뜻인데요, 만약 props 값이 문자 타입인데 

PropTypes.number.isRequired

위의 예시처럼 숫자타입을 설정하면 console창에서 경고 문구가 뜨게 됩니다.

상단 이미지를 보면 string을 써야 한다고 알려주는 경고가 나옵니다.

2. 필수 props값을 넣지 않았을때

isRequired에 대해서 살펴 보겠습니다. 반드시 값이 있어야하는데 값을 넣지 않을경우 경고 문구를 살펴보겠습니다. 

PropTypes.number.isRequired,

props값이 정의 되어있지않다고 경고 문구가 나옵니다.

3.필수 function값이 정의 되어 있지않을때

PropTypes.func.isRequired

func타입의 props를 필수값으로 정의 하였는데, 값이 정의 되어있지않을경우 저는 

ProptypesTest.propTypes = {
  testFunc: PropTypes.func.isRequired,
};
ProptypesTest.defaultProps = {
  testFunc: () => console.warn("testFunc 값이 없습니다.")
};

예제처럼 정의합니다. 여기에서 defultProps는 데이터값이 없을때 실행되도록  값을 넣어주는 것을 말합니다 .  

만약 function이 여러개일 경우 매번  defaultProps를 정의해주기가 힘들다면,

ProptypesTest.propTypes = {
  testFunc: PropTypes.func.isRequired,
  moreFunc: PropTypes.func.isRequired,
};
ProptypesTest.defaultProps = {
  testFunc: noFunction("testFunc"),
  moreFunc: noFunction("moreFunc")
};
function noFunction(funcName) {
  return () => console.warn(`${funcName} 이 정의되지 않았습니다.`);
};

이렇게 커스텀하여 설정해 줄 수 있습니다.

4.배열(array) 정의 

proptypes를 통해 props의 데이터 타입을 배열로 정의하고 내부의 값도 정의를 할 수 있습니다. 사용해 볼 타입은 arrayOf , oneOfType입니다.

PropTypes.arrayOf

arrayOf는 배열Props를 데이터 타입으로 가져야 할 때 사용합니다.

PropTypes.oneOfType

oneOfType은 여러데이터 타입중 일치하는 타입이 있으면 사용 가능합니다. 사용방법은 아래예시처럼 사용하시면 됩니다. 

ProptypesTest.propTypes = {
  arrayData: PropTypes.arrayOf(
    PropTypes.oneOfType([
      PropTypes.number,
      PropTypes.string,
      PropTypes.func
    ])
  ).isRequired
};
ProptypesTest.defaultProps = {
  arrayData: [2, "dd", () => { alert("aa"); }]
};

4. 객체(object) 정의

object에서 사용해 볼 타입은 objectOf 와 shape입니다. 

PropTypes.objectOf

objectOf는 객체 Props를 데이터 타입으로 가져야할때 사용합니다. 아까와 비슷한방법으로 onOfType도 사용해 보겠습니다. 

ProptypesTest.propTypes = {
  objectData: PropTypes.objectOf(
    PropTypes.oneOfType([
      PropTypes.number,
      PropTypes.string,
      PropTypes.func
    ])
  ).isRequired
};
ProptypesTest.defaultProps = {
  objectData: { a: 2, b: "dd", c: () => { alert("aa"); } }
};

일일이 데이터값을 정의해 주어야 할때는 shape를 사용해 주면됩니다. 

ProptypesTest.propTypes = {
  objectData: PropTypes.shape({
    a: PropTypes.oneOf([1, 2]).isRequired, /* 1 or 2중 하나면됨 */
    b: PropTypes.bool.isRequired, /*  true or false */
    c: PropTypes.any.isRequired, /* 아무 데이터타입이나 가능 */
  }).isRequired
};
ProptypesTest.defaultProps = {
  objectData: { a: 2, b: false, c: () => { alert("aa"); } }
};