🌱 e.target VS e.currentTarget
React와 같은 JavaScript 기반 프레임워크를 사용할 때, 이벤트 처리에서 흔히 접하게 되는 두 가지 개념이 바로 e.target과 e.currentTarget입니다. 두 개념 모두 이벤트 객체의 프로퍼티로 사용되지만, 사용되는 상황에 따라 그 의미와 용도가 다릅니다. 특히 e.target.value는 폼 요소에서 자주 사용되며, e.currentTarget은 이벤트 위임이나 복잡한 DOM 구조에서 유용합니다. 이 글에서는 e.target.value와 e.currentTarget의 차이를 상세히 살펴보고, 언제 어떤 것을 사용해야 할지에 대해 알아보겠습니다.
☀️ e.target
e.target은 이벤트가 실제로 발생한 요소를 가리킵니다. 즉, 이벤트가 트리거된 가장 하위의 DOM 요소입니다. 예를 들어, 클릭 이벤트가 발생했을 때 클릭한 정확한 요소가 무엇인지를 가리킵니다.
예시
<div onClick={(e) => console.log(e.target)}>
<button>Click Me</button>
</div>
위 코드에서 사용자가 버튼을 클릭하면 e.target은 button 요소를 반환합니다. 비록 onClick 핸들러가 div 요소에 바인딩되어 있지만, 실제 이벤트가 발생한 요소는 button이기 때문에 e.target은 button을 가리키게 됩니다.
폼 요소에서의 e.target.value
폼 요소(input, textarea, select)에서 자주 사용하는 e.target.value는 입력된 값을 가져오는 데 매우 유용합니다.
<input type="text" onChange={(e) => console.log(e.target.value)} />
위 코드에서 onChange 이벤트가 발생할 때마다, e.target.value는 사용자가 입력한 현재 값을 가져옵니다. 이 값은 보통 상태 관리에 사용되어, 사용자 입력을 기반으로 동적 업데이트가 이루어집니다.
☀️ e.currentTarget
e.currentTarget은 이벤트가 바인딩된 요소를 가리킵니다. 이는 이벤트 핸들러가 실제로 연결된 DOM 요소입니다. 예를 들어, 이벤트가 위임된 부모 요소에 바인딩되어 있을 때, 이벤트가 발생한 자식 요소와 관계없이 이벤트가 바인딩된 부모 요소를 가리킵니다.
예시
<div onClick={(e) => console.log(e.currentTarget)}>
<button>Click Me</button>
</div>
위 예시에서 사용자가 버튼을 클릭하더라도 e.currentTarget은 항상 div 요소를 가리킵니다. 왜냐하면 이벤트 핸들러는 div에 바인딩되어 있기 때문입니다.
☀️ e.target과 e.currentTarget의 차이
| 특징 | e.target | e.currentTarget |
|---|---|---|
| 의미 | 이벤트가 실제로 발생한 요소 | 이벤트가 바인딩된 요소 |
| 용도 | 이벤트가 발생한 정확한 요소를 알고 싶을 때 | 이벤트가 바인딩된 부모 요소에서만 동작하게 하고 싶을 때 |
| 예시 | 버튼 클릭 시, 클릭된 버튼 요소 | 버튼 클릭 시, 바인딩된 부모 요소 |
구체적인 차이 예시
<div onClick={(e) => {
console.log('target:', e.target);
console.log('currentTarget:', e.currentTarget);
}}>
<button>Click Me</button>
</div>
!https://velog.velcdn.com/images/https00200/post/456eff17-f111-40d2-9891-aacb28d09b3c/image.png
e.target은 *button입니다. 사용자가 클릭한 요소가button이기 때문입니다.e.currentTarget은 *div입니다. 이벤트 핸들러가div에 바인딩되어 있기 때문입니다.
☀️ e.target과 e.currentTarget 구분 사용
e.target을 사용하는 상황
- 폼 요소 처리:
input,textarea와 같은 폼 요소의 값을 실시간으로 처리하거나 상태에 저장할 때e.target.value를 사용합니다. - 중첩된 요소 이벤트 처리: 이벤트가 여러 중첩된 요소에서 발생할 때, 가장 하위 요소(이벤트가 발생한 특정 요소)에 접근해야 하는 경우에 사용합니다. 즉, 어떤 요소에서 이벤트가 발생했는 지 알고 싶을 때 사용합니다.
e.currentTarget을 사용하는 상황
- 이벤트 위임: 여러 자식 요소에서 동일한 이벤트를 처리하고자 할 때, 부모 요소에 이벤트를 바인딩하고 부모에서 자식 이벤트를 처리하는 경우 핸들러가 바인딩 된 부모 요소에서만 이벤트를 처리할 수 있습니다.
- 핸들러가 바인딩된 요소에서만 이벤트가 동작하도록 제어하고 싶을 때: 중첩된 DOM 구조에서 상위 요소에 이벤트가 바인딩되어 있고, 바인딩된 요소에서만 핸들러가 동작하도록 제어하고 싶을 때 사요합니다.
