2.Props와 Type, DefaultProps

/* [ props의 개념 ] - 컴포넌트 내부의 immutable Data(변하지 않는 데이터) - JSX 내부에 {this.props.propsName} - 컴포넌트를 사용할 때, <> 괄호 안에 propsName="value" - this.props.children 은 기본적으로 갖고있는 props로서, <Cpnt>여기에 있는 값들이 들어간다.</Cpnt> */ class Codelab extends React.Component{ render(){ return( <div> <h1>Hello{this.props.name}</h1> <!-- 저부분에 값을 넣을 거란 의미 --> <div>{this.props.children}</div> </div> ); } } class App extends React.Component{ render(){ return( // name(props이름) = {props에 지정할 값} // 여기선 {this.props.name}으로 또 값 입력할 수 있게끔 한 것 이후 아래에서 defaultProps로 세팅함 <Codelab name={this.props.name}>{this.props.name}</Codelab> // 태그 사이에 들어가는게 {this.props.children} 부분에 들어가도록 default로 지정되어있다. ); } } /* [props의 기본 값 설정하는 방법] : 위와같이 데이터를 직접 넣는 방법은 당연히 사용하고 : 최초 초기값 정도로 생각하면 되겠다. Component.defaultProps = {propvalue:값} */ class DefaultSettingTest extends React.Component{ render(){ return( <div>{this.props.value}</div> ); } }; DefaultSettingTest.defaultProps = { value:0 }; /* [ Type 검증 ] 특정 props값이 타입이 다르거나, 입력하지 않거나 등을 체크 여러 사람이 같이 작업할 경우 안정성을 위해 지정한다. Component.propTypes = {...} */ class TypeCheckTest extends React.Component{ render(){ return( <div> {this.props.value2} {this.props.secondValue2} {this.props.thirdValue2} </div> ); } }; TypeCheckTest.propTypes = { value2:React.PropTypes.string, secondValue2:React.PropTypes.number, thirdValue2:React.PropTypes.any.isRequired }; // Ex) class Ex extends React.Component{ render(){ return( <div> <h1>Hello{this.props.name}</h1> <h2>{this.props.number}</h2> <div>{this.props.children}</div> </div> ); } }; Ex.propTypes = { name:React.PropTypes.string, number:React.PropTypes.number.isRequired }; // default prop 값 지정 Ex.defaultProps = { name:'Unknown' } class App2 extends React.Component{ render(){ return( <Ex name={this.props.name} number={this.props.number}>{this.props.children}</Ex> ); } } ReactDOM.render(<App2 number={5}>I am your child</App2>,document.getElementById("root")); ReactDOM.render(<App name="velopert"/>,document.getElementById("root"));

html 쪽에서

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