[포트폴리오 만들기] 이벤트 위임 활용하기

https://ko.javascript.info/event-delegation
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

🔆 문제

클릭 이벤트 발생시 currentTarget요소의 value값을 가져왔어야 했는데
target요소와 currentTarget이 달랐다.
때문에 e.target.value의 결과가 undifined였다.

<li value="1" onClick={onClickCircle}>
   <p>주도적으로</p> 
   <p>진행한 기획</p>
// 🔺 p태그를 눌러도 이벤트 위임을 통해 onClickCircle이 동작하여 value "1"을 찾아야 한다.
</li>

🔆 과정

방법1. currentTarget을 찾기

이벤트가 발생된 요소인 e.target이 아니라, 이벤트 핸들러가 바인딩 된 e.currentTarget을 찾아 그 요소의 value값에 접근한다.

 const onClickCircle = (e: React.MouseEvent<HTMLLIElement>) => {
	    const {value} = e.currentTarget;
	}

방법2. closest 메서드 활용하기

• 주어진 CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회한다.
• 이후 이벤트 핸들러가 바인딩 된 요소(li요소)를 찾아 그 요소의 value 속성에 접근한다.

 const onClickCircle = (e: React.MouseEvent<HTMLLIElement>) => {
	const number = (e.target as HTMLLIElement).closest("li")?.value;
	}

방법3. data- dataset- 활용하기

이에 대한 자세한 내용은 이전 포스팅 참조

  const onClickCircle = (e: React.MouseEvent<HTMLLIElement>) => {
  const number = e.currentTarget.dataset.value;
  };

  return (
    	<li data-value="1" onClick={onClickCircle}>
          <p>주도적으로</p>
          <p>진행한 기획</p>
       </li>
)

🔆 결과

• 이벤트 위임을 통해 하위요소 각각에 동일한 이벤트 핸들러를 바인딩 할 필요 없이, 상위요소 하나에 한번만 바인딩하면 되서 더 코드가 간결해지고 유지보수 하기도 편할거라 생각됐다.

• e.target과 e.currentTarget이 다를 경우 어떻게 대처해야 할지 여러 방안을 생각해 볼 수 있었다.