React event의 여러가지 target

React나 html코드를 작성하다보면 사용자 인터랙션을 처리하기 위해 여러가지 event들을 핸들링하고 관련된 요소들을 참조해야하는 경우가 많이 있습니다. 이 때 event 오브젝트에는 target, currentTarget, relatedTarget 변수를 통해서 관련 요소들의 레퍼런스들을 전달해주는데요, 이 각각의 레퍼런스 변수들은 어떤 차이가 있을까요?

target 또는 currentTarget

target과 currentTarget은 이벤트가 발생한 지점의 요소들을 가리킵니다. event가 발생한 지점에서 중첩구조(nested)로 되어있는 html요소들중 가장 안쪽에 있는 요소가 target이 되며, currentTarget은 event handler가 등록되어있는 요소를 나타냅니다.

중첩구조란 스크립트 코드상 '요소'안에 '요소'가 배치되는 경우를 말하며, 시각적으로 겹쳐져있는것은 해당되지 않습니다.

import { MouseEvent, useState } from "react";
import "./styles.css";

export default function App() {
  function _onClickButtOn(event: MouseEvent<HTMLButtonElement>) {
    console.log("onClickButton", {
      target: event.target,
      currentTarget: event.currentTarget
    });
  }

  return (
    <button className={"Button"} onClick={_onClickButtOn}>
      버튼영역(BLUE)
      <span className={"ButtonText"}>
        텍스트영역(GREEN)
        <img className={"ButtonImage"} alt="image" width={30} height={30} />
      </span>
    </button>
  );
}

이미지를 클릭했을 경우

텍스트영역을 클릭했을 경우

버튼영역을 클릭했을 경우

 

위 예시를 살펴보면 어디(어느 요소)를 클릭하느냐에 따라 target에 이벤트가 발생된 가장 안쪽의 요소 레퍼런스값이 들어가고, currentTarget의 경우 해당 event를 처리하는 핸들러 함수(_onClickButton)가 button요소에 적용되었기 때문에 해당 button의 레퍼런스값이 들어가있는것을 볼 수 있습니다.

currentTarget 사용시 주의점

event의 currentTarget은 target과는 달리 이벤트 핸들러 함수가 종료되면 다시 null이 할당되기 때문에 비동기로 참조할경우 문제가 발생할 수 있습니다.

function _onClickButtOn(event: MouseEvent<HTMLButtonElement>) {
  setTimeout(() => {
    console.log("onClickButton", {
      target: event.target,
      currentTarget: event.currentTarget
    });
  }, 500);
}

비동기로 currentTarget 사용

---

relatedTarget

relatedTarget은 target이나 currentTarget과는 달리 이벤트가 발생한 지점이 아닌 해당 이벤트와 연관된 다른 요소를 가리키는 변수이며, 주로 focusEvent 또는 mouseEvent에서 확인할 수 있습니다.

 

focus관련 이벤트에서 target과 relatedTarget

mouse관련 이벤트에서 target과 relatedTarget

 

이벤트 종류에 따라 해당 이벤트의 대상이 될 수 없거나 이전에 대상이된 요소가 없는 경우처럼 관련된 요소가 존재하지 않을수 있기때문에 null값이 할당될수 있습니다.