Props & Event

Props

단어 듯 그대로 컴포넌트의 속성값이다

props는 부모 Component로부터 전달 받은 데이터를 지니고 있는 객체

props를 통해 부모 Component로부터 자식 컴포넌트에게 state의 상태 값, event handler를 넘겨줄 수 있다

state와 마찬가지로 Component의 props는 객체이다

 

Props를 통한 event handler 전달

// Parent.js class Parent extends React.Component {  constructor() {    super();    this.state = {      color: 'red'    }  } handleColor = () => {   this.setState({     color: 'blue'   }) } render() {   return (     <div>       <h1>Parent Component</h1>       <Child titleColor={this.state.color} changeColor={this.handleColor} />     </div>   );  } }

// Child.js class Child extends React.Component {   render() {     return (       <div>         <h1 style={{color: this.props.titleColor}}>Child Component</h1>         <button onClick={this.props.changeColor}>Click</button>       </div>     );   } }

Parents.js에 있는 handleColor를 props로 Child.js에 전달하여 활용