3.3.7 클래스형 컴포넌트에서 props 사용하기

    클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회하면 됩니다. 그리고 defaultPropspropTypes는 똑같은 방식으로 설정할 수 있습니다. MyComponent를 다음과 같이 클래스형 컴포넌트로 변환해 보세요.

    MyComponent.js

    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
     
    class MyComponent extends Component {
      render() {
        const { name, favoriteNumber, children } = this.props; // 비구조화 할당
        return (
          <div>
            안녕하세요,  이름은 {name}입니다. <br />
            children 값은 {children}
            입니다.
            <br />
            제가 좋아하는 숫자는 {favoriteNumber}입니다.
          </div>
        );
      }
    }
     
    MyComponent.defaultProps = {
      name: '기본 이름'
    };
     
    MyComponent.propTypes = {
      name: PropTypes.string,
      favoriteNumber: PropTypes.number.isRequired
    };
     
    export default MyComponent;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.