출처: https://www.codecademy.com

defaultProps 설정하기

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    class Button extends React.Component {
      render() {
        return (
          <button>
            {this.props.text}
          </button>
        );
      }
    }
    
    ReactDOM.render(
      <Button />, 
      document.getElementById('app')
    );

위 코드에서 <button> 태그부분에 {this.props.text} 에 해당하는 text 부분이 어디에도 선언되어 있지 않다면, 해당 버튼은 그냥 공백 버튼을 나타내게 된다.

defaultProps 을 미리 선언하여 초기값을 설정해두자

클래스명.defaultProps = { props명: 값 }; 

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    class Button extends React.Component {
      render() {
        return (
          <button>
            {this.props.text}
          </button>
        );
      }
    }
    
    // Set defaultProps equal to an object:
    Button.defaultProps = { text: 'I am a button' };
    
    ReactDOM.render(
      <Button />, 
      document.getElementById('app')
    );

실행화면

Override

초기값을 설정한 후 직접 ReactDOM.render()에서 text를 선언하면 override 된다.

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    class Button extends React.Component {
      render() {
        return (
          <button>
            {this.props.text}
          </button>
        );
      }
    }
    
    // Set defaultProps equal to an object:
    Button.defaultProps = { text: 'I am a button' };
    
    ReactDOM.render(
      <Button text="override" />, 
      document.getElementById('app')
    );

실행화면