Props
2022-06-13
1. Props
-
상위 컴포넌트에서 하위 컴포넌트로 내려주는 readonly 값
-
props가 변경되면 Child 컴포넌트 리렌더링 발생
import Child from 'path';
class Parent extends React.Component {
// 상위 컴포넌트의 state 부분
constructor(){
super();
this.state = {
a: [...],
b: 100
}
}
function() {
this.setState({
...
})
}
render() {
return (
<div>
<!-- 하위 컴포넌트로 state값을 props로 넘겨줌 -->
<Child
dataA={this.state.a}
dataB={this.state.b}
function={this.function.bind(this)}
></Child>
</div>
)
}
}
class Child extends React.Component {
// state 가 없는 경우 constructor 생략 가능
render(){
return (
<div>
{ this.props.dataA }
{ this.props.dataB }
</div>
)
}
}
-
props로 이벤트를 내려줄 수도 있음 ```jsx class Parent extends React.Component { …// 하위 컴포넌트에 props로 이벤트를 내려줌 render() { return( <Child onClickBtn={this.onClickFunction}> </Child> ) } }
class Child extends React.Component { … render() { return( <button onClick={this.props.onClickBtn}></button> ) } }
```