React

props란?

봄산 2019. 1. 11. 12:58

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'));