[React] prop-types 사용하기

앱의 규모가 커지면서 데이터의 수가 증가하고, 종류도 다양해진다. 점점 복잡해지는 상황에서 에러를 최소화하기 위해서 적절한 데이터를 사용할 필요가 있는데, prop-types 라이브러리에 내장된 기능을 활용하여 데이터 유효성을 검증하려고 한다.

 

설치

npm install prop-types

 

데이터 검증 유형

기본형식

import PropTypes from 'prop-types';

functino App({propString, propNumber, propArray, propObject, propFunc, propBool, propSymbol}) {
  return (
    // ...
  );
}

App.propTypes = {
  // 문자열
  propString: PropTypes.string,

  // 숫자
  propNumber: PropTypes.number,

  // 배열
  propArray: PropTypes.array,

  // 객체
  propObject: PropTypes.object,

  // 함수
  propFunc: PropTypes.func,

  // true, false
  propBool: PropTypes.bool,

  // 심볼
  propSymbol: PropTypes.symbol,
}

• 종류 : String, Number, Array, Object, Function, Boolean, Symbol

필수 prop 지정하기

import PropTypes from 'prop-types';

function App({ name }) {
  return (
    // ...
  );
}

App.propTypes = {
  name: PropTypes.string.isRequired,
}

• isRequired를 작성하여 해당 prop의 중요성을 더 강조한다.
• 잘못된 유형의 데이터 값이 들어오거나 값이 없다면 console 창에 warning 메시지가 출력된다.

 

---

참고

PropTypes와 함께 하는 타입 검사 – React