React 컴포넌트를 다루는 올바른 방식을 따르기 위해 ClickCounterButton 컴포넌트는 여전히 지난 번 예제처럼 상태비저장 컴포넌트로 유지하고, 속성과 JSX만 있다.

 

예제 코드 6.9 Content에서 전달한 이벤트 핸들러를 사용하는 버튼 컴포넌트

class ClickCounterButton extends React.Component {
    render() {
        return <button
            onClick={this.props.handler}
            className="btn btn-info">
            Don’t touch me with your dirty hands!
        </button>
    }
}

---

 

당연한 얘기겠지만, ClickCounterButton 컴포넌트를 클래스 대신 함수로 작성하여 문법을 좀 더 단순화할 수 있다.

const ClickCounterButton = (props) => {
  return <button
      onClick={props.handler}
      className="btn btn-info">
      Don’t touch me with your dirty hands!
  </button>
}