[리액트를 다루는 기술] 클래스형 컴포넌트로 변환하기(defaultProps & propTypes)

import React, {Component} from 'react'
import PropTypes from 'prop-types';

class MyComponent extends Component {
  static defaultProps = {
    name: '짱구',
  }

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

  render() {
    const {name, children, favoriteNumber} = this.props;
    return (
      <div>
        안녕하세요, 제 이름은 {name}입니다.<br />
        children 값은 {children}입니다.<br />
        제가 좋아하는 숫자는 {favoriteNumber}
      </div>
    )
  }
}

export default MyComponent

• import {Component} from 'react' 추가
• 클래스 이름 옆 extneds Component 추가
• defaultProps & propTypes는 외부에 선언할도 있고 static을 사용해 내부에 선언할 수도 있음
• render() 안에서 함수형 컴포넌트와 같은 방식으로 작성
• props를 비구조할당으로 가져올 때 this 붙여주기