[React] child에서 parent의 함수로 event handler 등록하기

내가 원하는 것

: 자식 component에서 어떤 이벤트가 발생하면 부모가 알아채고 state를 변경한다. 

 

리액트에서 event를 JSX로 연결할 수 있다는 것은, 아주 손쉽게 어떤 component에서 event에 따른 동작을 해당 component 이외에, 자신을 사용하는 component (부모 component)에서 컨트롤할 수 있도록 제공 가능하다는 이야기 이다.

즉 props나 state를 이용해서 event handler 을 연결할 수 있다는 이야기이다.

 

 

class형 예제

 

class Parent extends React.Component {
    parentHandler() {
        // Parent's defined handler
    }
    
    render() {
        const parentPassedHandler = this.parentHandler.bind(this);
        
        return (
        	<Child parentPassedHandler={parentPassedHandler}>
        );
    }
}


class Child extends React.Component {
	constructor(props) {
    	super(props);
        this.ownHandler = this.ownHandler.bind(this);
    }
    
    ownHandler() {
    	// Child own handler
    }
    
    render() {
    	// 부모가 props로 전달한 parentPassedHandler에
        // 부모가 자신(this)를 bind 했으면, 해당 함수가 called 되었을 때,
        // 해당 함수의 this는 부모
        const parentPassedHandler = this.props.parentPassedHandler;
        
        return(
			<button onClick={this.ownHandler}></button>
            <button onClick={parentPaseedHandler}></button>
        );
    }
}

 

해당 예제에서는 Parent 에서 정의한 함수를 props으로 자식에게 전달하였다.

 

Child는 부모가 전달한 함수를 자신(Child)의 event handler 로 등록하였다.

 

좀 더 생각해보면 다음과 같은 일이 가능하다.

 

자식에게 발생하는 이벤트에 따라, 부모 자신이 어떤 동작을 하게 할 수 있다.

자식에게 발생하는 이벤트에 따라, 자식 자신의 일을 한 다음 부모에게 어떤 동작을 하게 할 수 있다.

 

위 설명에서 '부모에게 어떤 동작을 하게 할 수 있다'는 것은, 부모가 전달한 함수를 call 할 수 있다는 뜻이다.

 

 

---

 

 

솔직히 저도.. 다른 블로그에서 배껴서 쓰긴 했는데 뭔지 잘 몰랐습니다.

하지만 터득했습니다.

 

저는 자식 component에서 버튼을 클릭하면 자식의 고유id번호를 부모에게 전달하고 싶었습니다. 그러기 위해서는.!

 

부모 component에서 이벤트핸들러를 작성하고 그것을 props를 통해 자식 component에게 넘겨줍니다.

그러고 자식 component 에서 props.이벤트핸들러()를 통해 부모에게 id를 전달할 수 있었습니다.