예를 들어 ClickCounterButton 컴포넌트에 counter와 이벤트 핸들러를 속성으로 전달하려면, 부모 컴포넌트의 render() 메서드에서 JSX를 작성할 때 속성으로 추가한다(여기서 부모 컴포넌트는 Content다).

<div>
  <ClickCounterButton
      counter={this.state.counter}
      handler={this.handleClick}/>
</div>

 

ClickCounterButton의 counter는 속성이므로 변경할 수 없다. 그렇지만 부모 컴포넌트인 Content에서는 상태이므로 변경할 수 있다(상태와 속성의 차이에 대해서는 4장을 살펴보기 바란다). 이름도 다르게 작성할 수 있다. 자식에게 속성을 전달할 때 반드시 같은 이름을 사용할 필요는 없다. 그렇지만 같은 이름을 사용하면 서로 다른 컴포넌트에서 데이터가 관련되어 있다는 점을 이해하는 데 도움이 된다.