이벤트 위임으로 데이터를 받아오자

📌문제 상황

아무래도 회사 업무라 자세하게 작성할 수 없지만, 대략적으로 설명하면, 사용자가 컴포넌트를 클릭하면 해당 컴포넌트의 text를 받아서, 처리해야 하는 상황이 있었다.

그냥 state 내려줘서 처리하면 되지.. 싶지만 해당 컴포넌트는

1. 부모 컴포넌트가 A 데이터를 필요로 함. 부모 컴포넌트는 map을 이용해 자식 컴포넌트를 여럿 생성함
2. 자식 컴포넌트에서 ol태그를 만들고 function을 호출함
3. utils.ts에 작성되어 있는 function을 통해 li태그와 각각 A 데이터가 만들어짐

과 같은 형식이었고 li 태그 안에있는 text를 받아와야 했기 때문에 function으로 만드는 li 태그를 어떻게 접근할지에 대해 고민하게되었다.🤔

그러던 중 문득 떠오른.. 이벤트 위임

사실 이벤트 위임이란 단어는 FE 면접에 자주 물어보는 예상 문제집(?)에 나와 있는 내용이라 자주 봤던 내용인데 이게 이렇게 도움이 될 줄이야😏

✅이벤트 위임

이벤트 위임은 부모 요소에 이벤트 리스너를 등록해서 자식 요소에서 발생하는 이벤트를 한꺼번에 처리하는 방식이다. 즉, 자식 요소가 동적으로 변경되는 경우에 유용하게 사용할 수 있다.

설명만 봐도 위에 문제를 해결할 수 있는 방식..!! 🥹

예시를 살펴보자.

<ul id="parent">
  <li>아이템 1</li>
  <li>아이템 2</li>
  <li>아이템 3</li>
</ul>

const parent = document.getElementById("parent")
parent.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log(event.target.textContent)
  }
})

✅적용해보면…

다시 상황을 돌아보면,

1. 부모 컴포넌트가 A 데이터를 필요로 함. 부모 컴포넌트는 map을 이용해 자식 컴포넌트를 여럿 생성함
2. 자식 컴포넌트에서 ol태그를 만들고 function을 호출함
3. utils.ts에 작성되어 있는 function을 통해 li태그와 각각 A 데이터가 만들어짐 나는 li 태그에 태그를 두고 있었기 때문에, span 태그 그리고 li태그일때 모두 선택이 필요해서 조건을 추가해주었다.

이므로, 먼저 부모 컴포넌트에서 state를 내려주고, 자식 컴포넌트에서는 이벤트 위임 방식을 이용해 데이터를 저장해주었다.

const handleDataClick = (event: MouseEvent) => {
  const target = event.target as HTMLElement
  if (target.tagName === "LI" || target.tagName === "SPAN") {
    setData(target.textContent)
  }
}

이로써, 부모 컴포넌트에서 동적으로 업데이트 생성되는 li태그의 데이터를 활용할 수 있게 되었다.

🙋‍♀️ 마무리

이벤트 위임을 떠올리고 실제로 실행 되었을 때 너무 기뻤다..

이벤트 위임 방식은 이렇게 자식 요소의 동적 변화에 도움이 될 뿐만 아니라 유지보수의 편리성도 있어서, 앞으로도 종종 사용하게 될 듯 하다.

이번에도 문제를 해결한 것에 박수 👏👏