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