코드를 실행하면 클릭할 때마다 카운터가 증가한다. 보기에는 그림 6-10처럼 버튼과 카운터가 있던 기존 예제와 달라진 것이 없다. 그렇지만 내부적으로는 상태를 저장하지 않고, 로직이 없는 ClickCounterButton 컴포넌트가 여전히 로직을 처리하고 있는 Content 컴포넌트에 추가되었다.

ClickCounterButton 컴포넌트는 자체적인 onClick 이벤트 핸들러가 없다(즉, this.handler 또는 this.handleClick 같은 메서드가 없다). 부모 컴포넌트가 전달한 이벤트 핸들러를 this.props.handler 속성으로 접근하여 사용한다. 일반적으로 버튼은 별도의 상태가 없는 프레젠테이션 컴포넌트이므로 이 방법을 사용해서 버튼의 이벤트를 처리하면 다른 UI에서 버튼을 재사용할 수 있는 이점이 있다.

다음 예제는 버튼을 렌더링하는 프레젠테이션 컴포넌트 코드를 보여준다(ch06/onclick-props/jsx/click-counter-button.jsx). 예제 코드 6.8의 부모 컴포넌트인 Content에서 버튼을 렌더링한다.

 

예제 코드 6.7 상태비저장 버튼 컴포넌트

class ClickCounterButton extends React.Component {
    render() {
        return <button
            onClick={this.props.handler}
            className="btn btn-danger">
            Increase Volume (Current volume is {this.props.counter})
        </button>
    }
}

---