Note 함수의 호출과 정의
예제 코드 6.6을 다시 보면 this.handleClick()은 메서드지만 JSX에서 onClick에 할당할 때 호출하지는 않는다(<button onClick={this.handleClick}). 즉, 중괄호 안의 this.handleClick 뒤에 ()를 작성해서 호출하지 않았다. 함수 정의를 전달할 뿐 호출할 필요는 없기 때문이다. 자바스크립트의 함수는 일급 객체이므로 이 경우에는 함수 정의를 onClick 속성 값으로 전달한 것이다.
반면, bind()의 경우에는 호출했는데, 호출해야만 bind()가 올바른 this 값을 가진 함수 정의를 반환하기 때문이다. 따라서 onClick의 값으로 여전히 함수 정의를 전달한다.
앞서 살펴본 것처럼, onClick은 실제 HTML 속성은 아니지만, className={btnClassName} 또는 href={this.props.url}처럼 문법적으로 다른 JSX 선언과 비슷하다는 점도 기억해두기 바란다.
버튼을 클릭할 때마다 카운터가 증가하는 것을 확인할 수 있다. 그림 6-10을 보면 버튼을 여덟 번 클릭했다는 사실을 알 수 있다. 카운터가 처음에는 0이었지만, 8이 됐다. 대단하지 않은가?
onClick이나 onMouseOver와 유사한 방법으로 React가 지원하는 DOM 이벤트를 다룰 수 있다. 상태를 변경하는 이벤트 핸들러와 뷰를 정의하는 것이다. 명령형으로 표현을 수정할 필요가 없다. 선언형 스타일의 힘을 느껴보자!
다음으로 자식 엘리먼트에 이벤트 핸들러나 다른 객체를 전달하는 방법에 대해서 살펴보자.