더북(TheBook)

클래스형 컴포넌트에서 defaultPropspropTypes를 설정할 때 class 내부에서 지정하는 방법도 있습니다.

MyComponent.js

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, favoriteNumber, children } = this.props; // 비구조화 할당
    return (...);
  }
}
 
export default MyComponent;

 

노트 defaultProps와 propTypes는 꼭 사용해야 하나요?

이 두 가지 설정은 컴포넌트의 필수 사항이 아니므로 꼭 사용할 필요가 없습니다. 하지만 여러분이 React를 사용하여 큰 규모의 프로젝트를 진행한다면, 특히 다른 개발자들과 협업한다면 해당 컴포넌트에 어떤 props가 필요한지 쉽게 알 수 있어 개발 능률이 좋아질 것입니다.

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