6.1.2 React 이벤트 살펴보기

jQuery나 일반적인 자바스크립트에서는 DOM 노드에 직접 이벤트 리스너를 연결하지만, React에서는 다른 방법으로 이벤트를 처리한다. 이벤트를 노드에 직접 연결하는 방법은 UI 라이프사이클에서 이벤트를 추가하거나 제거할 때 문제가 생길 수 있다. 예를 들어 계정 목록을 다룰 때 각 계정을 삭제, 편집하거나 새로운 계정을 목록에 추가하는 상황을 생각해보자. 각각 고유의 id를 가진 <li> 요소를 계정으로 하는 다음과 같은 HTML을 살펴보자.

<ul id="account-list">
  <li id="account-1">Account #1</li>
  <li id="account-2">Account #2</li>
  <li id="account-3">Account #3</li>
  <li id="account-4">Account #4</li>
  <li id="account-5">Account #5</li>
  <li id="account-6">Account #6</li>
</ul>