🌸 문제 상황

• 아래와 같은 코드를 짠 적이 있다.
• e.target을 이용해 CSS를 바꾸고자 하였는데
• 내 생각과 다르게 움직여 디버깅하는데 오랜 시간이 걸렸다.
• 해답은 e.target이 아니라 e.currentTarget를 썼어야 하는건데
• 그 이유를 설명하도록 하겠다.

const app = () => {

  const onClick = e => {
    console.log(e.target)
    console.log(e.currentTarget)
  }
  return (
      <div onClick={onClick}>
      	<button> 1 </button>
      	<button> 2 </button>
      </div>
    )
}

🌷 두 코드의 차이

• 쉽게 말해 e.target은 event가 전달한 객체에 대한 참조이고,
• e.currentTarget은 이벤트의 버블링 또는 캡처 단계에서 이벤트 핸들러를 호출하는 참조이다.
• 아직도 어렵다면 더 쉽게 설명하도록 하겠다.
• 위 코드를 작성하고 1인 버튼을 클릭하면 콘솔에는 아래처럼 찍힌다.
• <button> 1 </button>
• <div><button> 1 </button><button> 2 </button></div>
• 이해가 되는가?
• 다시 설명하자면..
• e.target은 정확하게 그 이벤트가 시작된 element를 반환하는 거라면,
• e.currentTarget은 현재 e를 인자로 받는 함수(이벤트 핸들러)가 달려있는 element를 반환하는 것이다.
• 혹시나 하는 마음에 e.currentTarget에 대한 공식 문서도 캡쳐하여 첨부한다.