그림 6-12에서 확인할 수 있는 것처럼, 이제 컴포넌트가 두 개 보인다. 버튼과 버튼 아래에 텍스트가 있다. 부모 컴포넌트인 Content에서는 상태인 값을 속성으로 가지고 있다. 그림 6-11의 예제와는 대조적으로 클릭 횟수를 계산하려면 버튼과 텍스트 사이에 통신이 필요하다. 즉, ClickCounterButton 컴포넌트와 Counter 컴포넌트 사이에 대화가 필요한 것이다. 둘 사이의 통신은 Content 컴포넌트를 통해 간접적으로 이뤄진다(직접 통신하면 강한 결합이 생기므로 나쁜 패턴이다).

▲ 그림 6-12 상태를 분리하고 각각 카운터 텍스트와 버튼으로 나누어 상태비저장 자식 컴포넌트를 두 개 만든다(부모 컴포넌트를 통해 데이터를 교환한다).