1. PropTypes를 쓰는 이유

• 기본적으로 javascript는 자료형이 없기때문에 자식컴포넌트에 props를 전달할때 해당 props데이터의 자료형을 체크해서 애러발생하는 일을 방지하기 위해 사용한다.
• propTypes를 사용함으로써 타입정의 만으로도 좋은 문서가 될 수 있다. propTypes를 이용해 속성값의 타입 정보를 위에 정의해 주면 컴포넌트의 로직을 이해하지 않고도 타입 정보를 한눈에 파악할 수 있다.

2. PropTypes 사용법

User.propTypes = {
  male: PropTypes.bool.isRequired,
  age: PropTypes.number,
  type: PropTypes.oneOf(["gold", "silver", "bronze"]),
  onChangeName: PropTypes.func,
  onChangeTitle: PropTypes.func.isRequired
}

const User = ({ type, age, male, onChangeName, onChangeTitle }) => {
  // ...

3.PropTypes 종류

다음은 propTypes로 정의할 수 있는 타입들이다.

MyComponent.propTypes = {
  // 리액트 요소
  // <div>123</div> , <Component />
  menu: PropTypes.element,
  
  // 컴포넌트 함수가 반환할 수 있는 모든 것(비추)
  // <SomeComponent />, 123
  description: PropTypes.node,
  
  // Message 클래스로 생성된 모든 객체
  // new Messages() -> 참, new Car() -> 거짓
  message: PropTypes.instanceOf(Message),
  
  // 배열에 포함된 값 중에서 하나를 만족
  name: PropTypes.oneOf(["jake", "olivia"]),

  // 배열에 포함된 타입 중에서 하나를 만족
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])

  // 특정 타입만 포함하는 배열
  // [1, 5, 7] -> 참, ['a', 'b'] -> 거짓
  ages: PropTypes.arrayOf(PropTypes.number),

  // 객체의 속성값 타입을 정의
  // {color: 'red', weight: 123} -> 참
  info: PropTypes.shape({
    color: PropTypes.string,
    weight: PropTypes.number
  })

  // 객체에서 모든 속성값의 타입이 같은 경우
  // {prop1: 123, prop2: 456}
  infos: PropTypes.objectOf(PropTypes.number)
}