자바스크립트 이벤트 중 클릭한 요소를 가져올 때, event 객체의 target 또는 currentTarget 프로퍼티를 사용한다.
이 때 둘의 차이점은 무엇이고 어떤 경우에 무엇을 사용해야 하는지 알아보자.

event.target? event.currentTarget?

event.target은 이벤트 버블링의 가장 마지막에 위치한 최하위의 요소를 반환한다.
클릭된 요소를 기준으로 사용하는 경우 event.target을 사용한다.

event.currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환한다.

<li>
  <button onClick={onClick}>
    <span>Submit</span>
  </button>
</li>

const onClick = (event) => {
  console.log(event.target);
  console.log(event.currentTarget);
}

// <span>Submit</span>

//  <button onClick={onClick}>
//    <span>Submit</span>
//  </button>

event.target은 자식 요소인 span을 리턴한다.
event.currentTarget은 이벤트가 바인딩 된 button을 리턴한다.

정리

event.target은 부모로부터 이벤트가 위임되어 발생하는 자식 위치, 내가 클릭한 자식 요소를 리턴한다.(실제 이벤트가 발생하는 요소)
currentTarget은 이벤트가 바인딩 된 부모의 위치를 리턴한다.(이벤트 리스너가 달린 요소)

복잡해지는 경우 event.target만으로는 어떤 요소가 클릭되어 반환되어야 하는지 그 결과가 달라질 수 있다.
이런 경우 event.currentTarget을 활용하는 것이 더욱 편리할 것이다.