[React] Proptypes

Proptypes 란...

prop에 대한 명시적인 타입 체크를 도와주는 라이브러리
built-in typechecking ability 이다

PropTypes 는 받은 데이터가 유효한 지 확인하는 데 사용할 수 있는 유효성 검사기의 범위를 내보낸다.

PropTypes는 부모로부터 전달받은 prop의 데이터 type을 검사한다. 자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면(유효하지않은 값이 전달) 콘솔에 에러 경고문이 띄워진다.

성능상의 이유로 propTypes 는 개발 모드에서만 체크한다.

사용방법

import PropTypes from 'prop-types';

예시

function Example({ propsOne, propsTwo, propsThree }) {
return ~~
}

Example.propTypes = {
  propsOne: PropTypes.bool,
  propsTwo: PropTypes.func,
  propsThree: PropTypes.string.isRequired,
};

• propTypes.bool : boolean 값이 들어와야 함을 확인해 준다.

• propTypes.func : Function이 들어와야 함..

• propTypes.string : 부모에게서 받아온 propsThree 라는 props의 형태가 string이 아니라 숫자, 함수 또는 객체 등 다른 형태면 콘솔에 에러 메시지가 출력된다.

• propTypes.string.isRequired : 뒤에 isRequired를 붙임으로써 반드시 입력되어야 하는 필수 prop으로 정의하였다.

• 그 외
  All Basic PropTypes
  Name | Type
  PropTypes.any | Anything
  PropTypes.array | Array
  PropTypes.bool | Boolean
  PropTypes.func | Function
  PropTypes.number | Integer
  PropTypes.object | Javascript Object
  PropTypes.string | String
  PropTypes.symbol | Symbols
  PropTypes.node | A renderable type (number, string, element, array…)
  PropTypes.element | React Element

장점

PropTypes를 사용함으로써 생기는 장점은 타입 정의만으로도 좋은 코드가 될 수 있다는 점이다. 어떤 코드는 컴포넌트를 사용하는 사람이 자세히 뜯어보지 않으면 속성값의 타입을 알기가 어렵지만 propTypes를 이용해 속성값의 타입 정보를 위에 정의해 주면 컴포넌트의 로직을 이해하지 않고도 타입 정보를 한눈에 파악할 수 있다.

prop 기본값 설정

Example.defaultProps = {
  propsOne: "/#",
  propsTwo: false,
  propsThree: 16,
};

각 prop에 대한 기본값을 설정해줄 경우 해당 prop에 입력값이 넘어오지 않았을 때 이 기본값이 사용됩니다. 그리고 children prop의 경우 위에서 타입을 정의할 때 필수 prop으로 정의하였기 때문에 기본값을 설정해줄 필요가 없습니다.