event.target과 event.currentTarget의 차이점은 무엇인가요?

🎯 event.target vs event.currentTarget

🤔 둘의 차이점이 뭐야?

간단하게 말하면:

• event.target: 실제로 클릭된 요소 (내가 손가락으로 누른 바로 그 요소!) 👆
• event.currentTarget: 이벤트 리스너가 달린 요소 (이벤트를 듣고 있는 요소) 👂

🏠 일상생활 예시로 이해하기

아파트 현관문에 초인종이 있다고 생각해보세요!

• 택배기사가 현관 초인종 버튼을 누름 → 이게 target
• 아파트 안의 엄마가 초인종 소리를 듣고 반응 → 이게 currentTarget

버튼을 누른 건 택배기사지만, 실제로 반응하는 건 엄마죠! 🚪🔔

💻 React 코드 예시

function App() {
  const handleClick = (e) => {
    console.log('target:', e.target.tagName);        // BUTTON
    console.log('currentTarget:', e.currentTarget.tagName); // DIV
  };

  return (
    <div onClick={handleClick} className="container">
      <button>클릭해주세요!</button>
    </div>
  );
}

버튼을 클릭하면 div의 이벤트 리스너가 실행되지만, target은 button이고 currentTarget은 div입니다! 🎯

🔄 이벤트 버블링이란?

이벤트가 자식 → 부모 순서로 전파되는 현상입니다. 마치 물속에서 거품이 위로 올라가는 것처럼! 🫧

<div onClick={handleParent}>     // 3번째 실행
  <span onClick={handleChild}>   // 2번째 실행  
    <button>클릭</button>        // 1번째 실행
  </span>
</div>

💡 실무에서 언제 사용할까?

1. 이벤트 위임 (Event Delegation) 📝

// 할 일 목록에서 각 항목마다 이벤트를 달지 않고
// 부모에만 달아서 처리
function TodoList() {
  const handleTodoClick = (e) => {
    if (e.target.classList.contains('delete-btn')) {
      // 삭제 버튼 클릭 시
      deleteTodo(e.target.dataset.id);
    }
  };

  return (
    <ul onClick={handleTodoClick}>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
          <button className="delete-btn" data-id={todo.id}>삭제</button>
        </li>
      ))}
    </ul>
  );
}

2. 모달 창 외부 클릭 시 닫기 🪟

function Modal({ onClose }) {
  const handleBackdropClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose(); // 배경 클릭 시에만 닫기
    }
  };

  return (
    <div className="modal-backdrop" onClick={handleBackdropClick}>
      <div className="modal-content">
        모달 내용
      </div>
    </div>
  );
}

🚨 주의사항

1. e.stopPropagation() 사용 시 버블링이 중단됩니다 ✋
2. 화살표 함수에서 this 바인딩 주의 ⚠️
3. Next.js에서는 onClick 이벤트가 자동으로 preventDefault 적용되지 않음 🔄

🎉 정리하면

• target: "누가 이벤트를 일으켰나?" (이벤트 발생 요소)
• currentTarget: "누가 이벤트를 처리하나?" (리스너 부착 요소)

이제 이벤트 처리가 훨씬 명확해졌죠? React나 Next.js 프로젝트에서 이벤트 위임을 활용하면 성능도 좋아지고 코드도 깔끔해집니다! 💪✨

---

 

event.target과 event.currentTarget의 차이점은 무엇인가요?

프론트엔드와 관련된 질문이에요.

event.target과 event.currentTarget은 모두 이벤트 객체의 속성이며, 각각 "이벤트가 실제로 발생한 요소" 와 "이벤트 리스너가 연결된 요소" 를 가리킵니다. 이 둘의 차이점을 이해하려면 이벤트 버블링을 알아야 합니다. 이벤트는 특정 요소에서 발생한 후 부모 요소들로 전파되는 과정(버블링)을 거치는데, 이 과정에서 target과 currentTarget이 다르게 동작합니다.

예를 들어, 부모 요소에 이벤트 리스너를 등록했지만 자식 요소에서 이벤트가 발생하여 버블링된 상황에서, target은 "이벤트가 발생한 요소"인 자식 요소를 가리킵니다. 반면, currentTarget은 "이벤트 리스너가 연결된 요소"인 부모 요소를 가리킵니다.

쉽게 말해, target은 “사용자가 직접 상호작용한, 즉 이벤트가 발생한 요소”를, currentTarget은 “그 이벤트를 듣고 있는 요소”를 나타냅니다. 예를 들어, <div> 안에 <button>이 있고, <div>에 이벤트 리스너가 부착되어 있다면, 버튼을 클릭했을 때 target은 <button>을, currentTarget은 <div>를 반환합니다.

이 차이는 이벤트 위임이나 이벤트 전파 처리 시 중요합니다. target과 currentTarget을 적절히 활용하면, 이벤트 처리 시 원하는 대상을 명확히 지정하여 예기치 않은 동작을 방지할 수 있습니다.