defaultProps

 

 

defaultProps

 

컴포넌트 클래스 Button을 살펴보아라. 

import React from 'react';
import ReactDOM from 'react-dom';

class Button extends React.Component {
  render() {
    return (
      <button>
        {this.props.text}
      </button>
    );
  }
}

// defaultProps goes here:


ReactDOM.render(
  <Button />, 
  document.getElementById('app')
);

8번째 줄에서, Button은 text로 이름된 prop을 받을 것이라 예상한다. 

받은 text는 <button></button> 엘레먼트의 내부에 보여질 것이다. 

 

만약 아무도 Button에 text를 전달하지 않는다면?

 

만약 아무도 Button에 text를 전달하지 않는다면, 

그렇다면 Button의 display는 빈칸이 될 것이다. 

그러나 만약 Button이 대신에 디폴트 메세지를 보여줄 수 있다면 더 나을것이다. 

 

당신은 당신의 컴포넌트 클래스에 defaultProps라 이름된 property를 줌으로써 이것이 일어나도록 만들 수 있다.

 

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}

Example.defaultProps;

 

defaultProps property는 객체에 똑같이 전달되어야 한다. 

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}

// Set defaultProps equal to an object:
Example.defaultProps = {};

Inside of this object, write properties for any default props that you’d like to set:

 

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}

Example.defaultProps = { text: 'yo' }; 

만약 <Example /> 에 아무런 텍스트를 전달하지않는다면 "yo"를 보여줄것이다. 

만약 <Example />에 몇 택스트가 전달된다면, 전달된 텍스트가 보여질 것이다. 

 

import React from 'react';
import ReactDOM from 'react-dom';

class Button extends React.Component {
  render() {
    return (
      <button>
        {this.props.text}
      </button>
    );
  }
}

// defaultProps goes here:
Button.defaultProps = {text: 'I am a button'};

ReactDOM.render(
  <Button text="" />,  // 디폴트값이 위에 만들어졌지만, 그 위에 ""를 덮어써서 결국 버튼엔 아무 텍스트가 없음.
  document.getElementById('app')
);

 

 

https://www.codecademy.com/courses/react-101/lessons/this-props/exercises/defaultprops