React 이벤트 위임

이벤트 위임은 자식 요소가 여러 개 일 때 부모 요소에만 이벤트를 적용하면 버블링에 의해 이벤트가 실행되는 것을 이용하는 기법이다. 핸들러를 여러개 사용하지 않아도 되어 메모리를 절약하거나 요소가 추가되거나 제거되었을 때 별로도 이벤트를 추가하거나 제거해야하는 필요성이 없는 장점을 지닌다.
 
근데 React에서는 이벤트를 빌드 단계에서 Root Element로 위임시킨다고 한다. 즉 개발자가 이벤트 위임 패턴을 사용해서 코드를 작성해도 성능적인 이점을 가져갈 수 없는 것이다. Root Element로 모든 이벤트가 위임된다는 것은  React에서는 이벤트 발생 단계 중 캡쳐링 단계가 없다는 것이다. 버블링은 어떨까?
 

<footer
    onClick={() => alert('footer')}
    style={{ width: '100%', border: '1px solid black' }}
  >
    <div
      onClick={() => alert('footer 안에 div')}
      style={{ width: '100px', border: '1px solid black' }}
    >
      footer안에 div
    </div>
</footer>

 
이렇게 코드를 작성하고 div를 클릭하면 footer의 이벤트도 발생한다. 즉 버블링 과정은 정상적으로 일어난다. 이벤트 위임이 일어나면서 이벤트 간의 관계를 알고 있다고 추측할 수 있다.