props란?

Props는 부모 컴포너트에서 받은 변하지 않은 값입니다.

1) 함수형 컴포넌트에서 PROPS사용 하기

function Square(props){

return(

<h1>{props.number} square is {props.number * props.number}</h1>

)

}

ReactDOM.render(

<Square number="2"></Square>

, document.getElementById('root'));

2)클래스형 컴포넌트에서 props사용하기

class Square2 extends React.Component{

render(){

return(

<h1>{this.props.number} square is {this.props.number * this.props.number}</h1>

);

}

}

ReactDOM.render(

<div>

<Square number="2"></Square>

<Square2 number ="3"></Square2>

</div>

, document.getElementById('root'));

3)props의 children-String,Object,Array

function ObjectChilderen(props){

return(

<h3>{JSON.stringify(props.children)}</h3>

)

}

function ArrayChilderen(props){

return(

<h3>{JSON.stringify(props.children)}</h3>

)

}

ReactDOM.render(

<div>

<Square number="2"></Square>

<Square2 number ="3"></Square2>

<StringChilderen>Hello i am child</StringChilderen>

<ObjectChilderen>

<h1>h1</h1>

</ObjectChilderen>

<ArrayChilderen>

<h1>h1</h1>

<h2>h2</h2>

</ArrayChilderen>

</div>

, document.getElementById('root'));