마지막으로 이벤트 핸들러와 카운터를 속성으로 제공하는 부모 컴포넌트를 확인해보자. render() 메서드를 수정해야 하지만 그 외의 부분은 변경하지 않았다.

 

예제 코드 6.10 두 개의 컴포넌트에 이벤트 핸들러와 상태를 전달한다.

class Content extends React.Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
        this.state = {counter: 0}
    }
    handleClick(event) {
        this.setState({counter: ++this.state.counter})
    }
    render() {
        return (
            <div>
                <ClickCounterButton handler={this.handleClick}/>
                <br/>
                <Counter value={this.state.counter}/>
            </div>
        )
    }
}

---

 

앞서 우리가 의문을 품었던 이벤트 처리와 관련된 로직을 작성하는 위치에 대해 정리해보자. 자식 컴포넌트 간에 상호작용이 필요한 경우에는 부모나 컨테이너 컴포넌트에 두는 것이 가장 좋은 방법이다. 그렇지만 이벤트가 하나의 자식 컴포넌트에만 영향을 끼친다면, 상위 컴포넌트를 이벤트 처리 메서드로 어지럽힐 필요가 없다.