props

기본 값 설정

Component.defaultProps = {...}

class App extends React.Component{
	render(){
    	return (
        	<div>{this.props.value}</div>
        );
    }
};

App.defaultProps = {
	value : 0
}

Type 검증

Component.propTypes = {...}

class App extends React.Component{
	render(){
    	return (
          <div>
          		{this.props.value}
         		{this.props.secondValue}
  				{this.props.thirdValue}
          </div>
        );
    }
};

App.propTypes = {
  value : React.PropTypes.string,
  secondValue : React.PropType.number,
  thirdValue : React.PropTypes.any.isRequired
}

사용예

js

class Codelab extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello {this.props.name}</h1>
        <h2>{this.props.number}</h2>
        <div>{this.props.children}</div>
      </div>
    );
  }
}

Codelab.propTypes={
  name : PropTypes.string,
  number : PropTypes.number.isRequired
};

Codelab.defaultProps ={
  name:'Unknown'
}

class App extends React.Component {
  render() {
    return (
      <Codelab name={this.props.name} number={this.props.number}>{this.props.children}</Codelab>
    );
  }
}

ReactDOM.render(<App number={4}>I am your child</App>,document.getElementById('root'));

html

<div id="root"></div>