예를 들어 사용자가 Enter를 눌렀을 때 데이터를 제출할 수 있는 좋은 UX를 제공할 수 있다(사용자가 textarea 영역에서 Enter를 누른 경우에는 개행이 되어야 하므로 다른 영역이라고 생각하자). this.handleSubmit()을 실행하는 이벤트 리스너를 생성해서 폼의 submit 이벤트에 등록할 수 있다.
handleSubmit(event) {
...
}
render() {
return <form onSubmit={this.handleSubmit}>
<input type="text" name="email" />
</form>
}
Note
handleSubmit() 메서드는 다른 이벤트와 마찬가지로 render()의 외부에서 구현해야 한다. React는 메서드 이름에 대해 별도의 규칙이 없으므로 이벤트 핸들러의 이름은 이해할 수 있고 일관성만 유지한다면 자유롭게 정할 수 있다. 이 책에서는 가장 선호되는 규칙인 이벤트 핸들러 이름 앞에 handle을 접두사로 붙여서 일반적인 클래스 메서드와 구분하고 있다.
Note
기억을 상기시키는 차원에서 이야기하면 이벤트 핸들러를 추가할 때는 뒤에 괄호를 붙여서 실행시키거나 큰따옴표를 쓰지 않는다. EVENT={this.METHOD}라고 작성하면 맞다. 어떤 사람은 이것이 기본적인 자바스크립트이며 간단하다고 느낄 수 있지만, 이벤트 핸들러 작성법을 잘못 이해해서 React 코드에 오류가 생기는 것을 얼마나 많이 봐왔는지 모른다. 함수의 결과가 아니라 정의를 전달해야 하며, JSX의 속성 값을 전달할 때는 중괄호를 사용한다.