이벤트 위임 with TypeScript

이벤트 위임은 상위 부모 엘리먼트에 자식 엘리먼트에서 사용하는 이벤트 핸들러를 등록하여 이벤트 버블링으로 이벤트를 캐치해서 한번의 이벤트 핸들러를 등록하여 각각의 자식 엘리먼트에 이벤트를 등록한 것과 같은 효과를 볼 수 있다.

이 개념을 Typescript에 적용을 어떻게 시키는지가 궁금했었는데 타입 가드를 이용하여 구현을 해봤다. 타입 가드에서 HTMLElement는 원시값이 아니기 때문에 instanceof를 사용해야할 것 같았고, 별도 함수를 만들어서 타입 가드를 구현하였다.

export default function App() {
  const handleChange = (e:ChangeEvent<HTMLFormElement>) => {
    const target = e.target;
    if(isHTMLInputElement(target)) {
      console.log('input element');
    } else if(isHTMLTextAreaElement(target)) {
      console.log('textarea element');
    }
  }
  
  return <form onChange={handleChange}>
    <input />
    <textarea />
  </form>
}

function isHTMLInputElement(target: HTMLElement): target is HTMLInputElement {
  return target instanceof HTMLInputElement;
}
function isHTMLTextAreaElement(
  target: HTMLElement,
): target is HTMLTextAreaElement {
  return target instanceof HTMLTextAreaElement;
}

막혔던 점은 form 태그에 Change Event를 넣을 때 항상 HTMLFormElement type을 명시해줘야 해서 그 부분에서 막혔었고 그 부분을 클리어한채로 내부 로직에서 target을 기준으로 input, textarea여부를 확인하는 로직으로 구현을 하였다.

프로젝트에서 실제로 이벤트 위임을 이용하여 구현을 했었지만 그때는 타입가드라는 개념을 도입을 안했었는데 이번 기회에 타입가드라는 명확한 키워드와 개념을 적용시켜야 겠다.