TIL 78일차_PropTypes

TypeScript처럼 타입을 확인할 수 있는 기능이
React 내장되어 있는데, 바로 prop-types이다.

import PropTypes from 'prop-types'

클래스 컴포넌트, 함수 컴포넌트 상관없이 사용할 수 있다.
Test라는 함수의 props 들의 type을 확인해 보자.

1. 아래는 name prop이 string인지 확인하는 예시이다.

Test.propTypes = { // 소문자 p
    prop: PropTypes.string, // 대문자 P
}

2. 배열 또는 객체가 한가지 타입으로 구성되어있는지 확인 => arrayOf, objectOf

prop1: PropTypes.arrayOf(PropTypes.number)

3. 객체의 각 property value들의 타입을 하나하나 확인

prop2: PropTypes.shape({
    one: PropTypes.string,
      two: PropTypes.array.isRequired,
      three: PropTypes.bool,
      four: PropTypes.func
      five: PropTypes.any
})

4. 2+3 배열안의 객체의 value들의 타입을 하나하나 확인

prop3: PropTypes.arrayOf(
    PropTypes.shape({
        one: PropTypes.string.isRequired,
          two: PropTypes.number,
    })
),isRequired