6.1.6 컴포넌트 간의 데이터 교환

이전 예제에서 클릭 이벤트 핸들러는 부모 컴포넌트에 작성했다. 이벤트 핸들러를 자식 컴포넌트에 둘 수도 있지만, 부모 컴포넌트에 이벤트 핸들러를 두면 자식 컴포넌트들과 정보를 교환할 수 있다.

이번에도 버튼을 예제로 사용하는데, 대신 render() 메서드에서 카운터 값을 제거해보자. 컴포넌트는 단일 지향적이며 세분화된 표현의 일부라는 점을 기억하고 있을 것이다. 카운터를 새로운 컴포넌트 Counter에서 처리하자. 이렇게 해서 컴포넌트를 총 세 개, 즉 ClickCounterButton, Content, Counter를 생성한다.