작성일자 : 2020.01.16
case1 : 부모 -> 자식 데이터 전달
부모 컴포넌트
|
class Parent extends React.Component { parentText = 'parentText'; render(){ return ( <Child childMessage={this.parentText}></Child> ) } } |
자식 컴포넌트
|
class Child extends React.Component { render(){ return ( <div> {this.props.childMessage} </div> ) } } |
- 부모 컴포넌트에서 자식 컴포넌트에 데이터 직접 전달
case2 : 자식 -> 부모 데이터 전달
부모 컴포넌트
|
class Parent extends React.Component { parentFunction = (text) => { console.log(text); } render(){ return ( <Child parentFunction={this.parentFunction}></Child> ) } } |
자식 컴포넌트
|
class Child extends React.Component { childText = 'childText';
childFunction = () => { this.props.parentFunction(this.childText); }
render(){ return ( <div> <button onClick={this.childFunction}>button</button> </div> ) } } |
- 부모 컴포넌트에서 자식 컴포넌트에 함수를 데이터로서 전달 후, 해당 함수를 통해 자식 데이터를 부모에게 전달