[리액트를 다루는 기술] PropTypes로 props 타입과 필수 관리

// MyComponent.js
import React from 'react'
import PropTypes from 'prop-types';

export default function MyComponent({name, children, favoriteNumber}) {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다.<br />
      children 값은 {children}입니다.<br />
      제가 좋아하는 숫자는 {favoriteNumber}
    </div>
  )
}

MyComponent.defaultProps = {
  name: '짱구',
}

MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
}

// App.js
import MyComponent from "./MyComponent";

function App() {
  return <MyComponent name='React' favoriteNumber={1}>리액트</MyComponent>
}

export default App;

• PropTypes를 prop-types에서 import
• component.propTypes = {} 로 사용(propTypes 소문자 주의)
• 원하는 props의 타입 설정 가능
• isRequired를 이용해 필수요소 설정 가능(꼭 타입 먼저 설정해주고 뒤에 imRequired 붙일 것)