JS e.target vs e.currentTarget (미스터리 해결기...)

카드 목록에서 카드를 클릭했을 때 해당 카드의 id를 넘겨주어 위치를 변경하는 코드를 짜던 중 ㄹㅇ 의문스러운 일이 일어났다.

이 목록에서 각 presentation의 id는 1, 2, 3이다. 클릭했을 때 `/presentation/summary?presentation_id=${currentId}`로 위치를 변경했디.

const navigateToPresentation = (e) => {
    const currentId = e.target.id;
    navigate(`/presentation/summary?presentation_id=${currentId}`);
  };

{presentationList.map((p) => (
          <s.Presentation id={p.id} key={p.id} onClick={navigateToPresentation}>
            <s.PresentationTitle>{p.title}</s.PresentationTitle>
            <s.PresentationDate>{p.date}</s.PresentationDate>
          </s.Presentation>
        ))}

위 코드로 카드를 클릭했을 때 navigateToPresentation()을 호출하며 이벤트를 넘겨줬는데, 이벤트 타겟의 id값이 어떨 땐 넘어가고 어떨 땐 넘어가지 않는 것이다. 그런데 정말 어떤 기준으로 변화가 생기는 지 알 수가 없어서 (p.id 를 바로 넘겨주면 잘 작동 했지만) 한참을 들여다 봤다.

 

콘솔에 찍어가며 계속 시도해 본 결과,

1. id가 넘어가지 않을 때 e.target은 id가 없는 엘리먼트였다.
2. 하지만 화면에 있는 카드들에는 항상 id가 잘 들어가 있었다. (애초에 데이터가 안 들어갔다면 Presentation 카드가 제대로 나올 수가 없음)
3. 그럼 클릭 이벤트의 target이 다른 엘리먼트로 인식 된 건 아닐까?

라는 흐름으로 파악이 됐다.

 

그래서 콘솔에 e.target을 찍어 나온 div의 class명을 화면에 찍힌 엘리먼트들의 class명과 비교해보니 원인을 알 수 있었다. 자식 엘리먼트인 제목이나 날짜가 클릭됐을 경우 부모 엘리먼트인 카드가 아니라 자식 엘리먼트가 이벤트의 타겟이 된 것이다. 자식 엘리먼트들에는 id가 없으니 당연히 어떤 값도 전달되지 않는다!

 

e.target이 문제였다. e.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 즉 내가 클릭한 자식 요소를 반환한다. 그러나 e.currentTarget은 이벤트가 부착된 부모의 위치를 반환한다. onClick을 정의해준 Presentation 엘리먼트를 제대로 인식시켜 주려면 e.currentTarget을 사용해야 했던 것이다.

 

실제로

  const navigateToPresentation = (e) => {
    const currentId = e.currentTarget.id;
    navigate(`/presentation/summary?presentation_id=${currentId}`);
    console.log(e.target);
    console.log(e.currentTarget.id);
  };

위 코드로 e.target과 e.currentTarget의 id를 비교해 보니

이렇게 부모(id가 잘 들어가 있는 div)를 클릭했을 때나 자식(id가 없는 div)을 클릭했을 때나 부모의 id가 잘 출력되는 것을 확인할 수 있었다.