React PropTypes 타입 검사

 

PropTypes는 전달받은 데이터의 유효성을 검증하기 위해서 다양한 유효성 검사기(Validator)를 내보냅니다. 아래 예시에서는 PropTypes.string을 사용하게 될 것입니다. prop에 유효하지 않은 값이 전달 되었을 때, 경고문이 JavaScript 콘솔을 통해 보일 것입니다. propTypes는 성능상의 이유로 개발 모드(Development mode) 에서만 확인될 것입니다.

 

 

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

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

 

타입	검사 방법
모든 타입	PropTypes.any
Number 객체	PropTypes.number
String 객체	PropTypes.string
Boolean 객체	PropTypes.bool
Function 객체	PropTypes.func
Array 객체	PropTypes.array
Object 객체	PropTypes.object
Symbol 객체	PropTypes.symbol
Node 객체	PropTypes.node
React 요소	PropTypes.element
여러 타입 중 하나	PropTypes.oneOfType([PropType.number, PropType.string])
특정 클래스의 인스턴스	PropTypes.instanceOf(Date)
전달 속성 제한	PropTypes.oneOf(['name', 'career'])
특정 타입 집합으로 제한	PropTypes.arrayOf(PropTypes.string)
특정 타입을 속성 값으로 하는 객체 제한	PropTypes.objectOf(PropTypes.number)
특정 형태를 갖는 객체 제한	PropTypes.shape({ prop1, prop2 })

 

isRequired 설정은 필수로 전달 받는 속성을 말합니다.

설정	설명
PropTypes.string.isRequired	문자 형 (필수)
PropTypes.number.isRequired	숫자 형 (필수)
PropTypes.func.isRequired	함수 형 (필수)
PropTypes.bool.isRequired	불리언 형 (필수)

 

컴포넌트 props의 필수 여부를 지정하거나 props의 Datatype을 지정할 때 사용

규칙에 맞지 않으면 warning 메시지 출력 - 개발모드

import PropTypes from 'prop-types';

해당 컴포넌트명.propTypes = {
  props명: PropTypes.타입,
  props명: PropTypes.타입.isRequired // 필수여부
};

 

 

초기 Prop 값

defaultProps 프로퍼티를 할당함으로써 props의 초깃값을 정의할 수 있습니다.

import PropTypes from 'prop-types';

// props의 초깃값을 정의합니다.
해당컴포넌트.defaultProps = {
  props명: '초기값'
};