handleClick() 메서드는 다른 React 컴포넌트 메서드와 다를 것이 없다. 3장에서 살펴본 getUrl()과 앞에서 설명한 handleMouseOver()를 기억하고 있을 것이다. this 바인딩을 직접 해주는 것을 제외하면, handleClick() 메서드도 비슷한 방식으로 선언한다. handleClick() 메서드는 상태 객체의 카운터 값을 1씩 증가시켜서 현재 카운터 값으로 변경한다(ch06/onclick/jsx/content.jsx).

 

예제 코드 6.6 클릭할 때마다 상태 갱신하기

class Content extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            counter: 0 ---- 초기 상태를 0으로 설정한다.
        }
    }
    handleClick(event) {
        this.setState({counter: ++this.state.counter}) ---- 카운터 값을 1씩 증가시킨다.
    }
    render() {
        return (
            <div>
                <button
                    onClick={this.handleClick.bind(this)}
                    className="btn btn-primary"> ---- onClick 이벤트 리스너로 handleClick 메서드를 연결한다.
                    Don’t click me {this.state.counter} times! ---- 상태 객체의 카운터 값을 보여준다.
                </button>
            </div>
        )
    }
}

---