[JS] event target과 currentTarget의 차이

currentTarget과 target은 자바스크립트에서 이벤트 핸들러 함수에서 사용할 수 있는 이벤트 객체의 프로퍼티 중에서 두 가지입니다. 이 둘은 이벤트가 발생한 요소와 현재 이벤트가 처리되는 요소, 즉 이벤트 버블링 과정에서 현재 이벤트가 진행 중인 요소를 나타냅니다.

currentTarget은 이벤트 핸들러가 바인딩된 요소를 가리킵니다. 즉, 이벤트를 처리하는 함수가 등록된 요소가 아닌 이벤트가 발생한 요소를 가리키는 target과는 달리, 핸들러 함수가 등록된 요소를 가리킵니다. 예를 들어, 아래 코드에서는 이벤트를 처리하는 함수가 바인딩된 요소인 div를 가리킵니다.

function handleClick(event) {
  console.log(event.currentTarget); // <div>
  console.log(event.target); // <p>
}

<div onClick={handleClick}>
  <p>Click me!</p>
</div>

반면에 target은 실제 이벤트가 발생한 요소를 가리킵니다. 예를 들어, 위의 코드에서 p 요소를 클릭하면 event.target은 p 요소를 가리킵니다. 이벤트 버블링 과정에서는 이벤트가 발생한 요소에서부터 상위 요소로 이벤트가 전파되며, 이 때 target은 해당 상위 요소 중 가장 가까운 요소를 가리킵니다.

function handleClick(event) {
  console.log(event.currentTarget); // <div>
  console.log(event.target); // <p>
}

<div onClick={handleClick}>
  <p>Click me!</p>
</div>

currentTarget과 target은 보통 이벤트 핸들러 함수에서 주로 사용됩니다. 이벤트가 발생한 요소를 알아야 할 때는 target을, 이벤트 핸들러가 등록된 요소를 알아야 할 때는 currentTarget을 사용합니다. 예를 들어, 버튼을 클릭하면 해당 버튼의 텍스트를 출력하는 예제를 보겠습니다.

function handleClick(event) {
  console.log(event.currentTarget.innerText); // Click me!
}

<button onClick={handleClick}>Click me!</button>

위의 예제에서는 이벤트 핸들러가 버튼 요소에 등록되었지만, 버튼 요소에서 발생한 이벤트가 처리되는 함수에서는 currentTarget을 사용하여 버튼 요소를 가리키고, 해당 요소의 innerText 값을 출력하고 있습니다.