e.currentTarget vs e.target

currentTarget => 이벤트가 등록되어 있는 요소를 가리킴,
target => 이벤트가 실제 일어나는 요소를 가리킴, 더 정확히는 이벤트버블링의 가장 마지막에 위치한 최하위의 요소

<li key={item.currentId} onClick={handleDelete}>
   <span>{item.description}</span>
   <button data-id={item.currentId}>Delete</button>
</li>

버튼 클릭시

• e.currentTarget => 이벤트가 등록된 요소,<li></li>
• e.target => 이벤트가 실제 일어난 요소,<button><button />

하위 요소인 <button></button>클릭시 상위 요소에 등록된 onClick이 실행된 이유는?

• 이벤트 버블링 때문(하위 요소에서 일어난 이벤트 발생을 상위요소가 감지하고 자신에게 등록된 이벤트가 있으면 이벤트 동작시키기에 <li></li>에 등록된 onClick이 동작)