3.3.6.1 isRequired를 사용하여 필수 propTypes 설정

    propTypes를 지정하지 않았을 때 경고 메시지를 띄워 주는 작업을 해 봅시다. propTypes를 지정할 때 뒤에 isRequired를 붙여 주면 됩니다. 이번에는 favoriteNumber라는 숫자를 필수 props로 지정해 보겠습니다.

    MyComponent.js

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

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