[React] 자식 컴포넌트에서 부모로 callback 보내기 #onClick

이번에 개발을 하다보니 부모 뷰 에서 여러가지 컴포넌트들을 뷰에서 관리하고 동작하는 행동이 많았다.

 

자식 컴포넌트에서 부모로 데이터를 보내는 방법이 뭐가 있을까 하다가 찾아낸 방법이다.

 

Home.js

class Home extends Component {
	callback=(data)=>{
    	//여기서 자식에 응답이 왔을 경우 처리를 해준다.
    }
	render(){
    	return({
        	<div>
            	<Component callback={this.callback} /> //여기서 넣어줌
            </div>
        });
    }
}

 

컴포넌트에서는 예를 들어 버튼이 클릭되었을 때 callback 함수를 실행 시켜 주면 된다.

 

Compoent.js

function Compoent({ callback }) {
	return({
    	<div>
        	<Button onClick={callback}> CLICK </Button>
        </div>
    });
}

쉽게 쉽게 통신이 가능하다.