프론트엔드 직무 면접 준비를 하며 이벤트 버블링과 이벤트 캡쳐링에 대해 알게 되었습니다.
사실, 이전부터 이벤트 버블링과 이벤트 캡쳐링에 대해선 많이 들어 보았습니다.
하지만, 부정적인 의미나 현상으로써 알았기 때문에 이벤트 버블링과 이벤트 캡쳐링을 발생시켜서는 안 되는 것으로 알았습니다.
하지만, 엄밀하게는 브라우저에서 이벤트가 전파되는 현상? 혹은 이벤트가 처리되는 방법이라고 생각하는 게 맞는 것 같습니다.
따라서, 이를 이용해 성능을 향상시킬 수 있는 방법도 존재했습니다.
투데이 링크에서는 이벤트 버블링과 이벤트 위임을 이용해 다음과 같이 이용해 최적화했습니다.
투데이 링크 메인 화면의 상단에는 다음과 같이 여러 태그 중 하나를 선택할 수 있습니다.
기존에는 태그가 선택되는 이벤트를 감지하기 위해 <Tag/> 컴포넌트 각각에 이벤트 핸들러를 할당했습니다.
이 방법이 틀렸다고는 할 수는 없지만, 이벤트 버블링과 이벤트 위임을 통해 다음과 같은 부분을 개선할 수 있다고 생각했습니다.
1. 기존 모든 <Tag/> 컴포넌트마다 이벤트 핸들러가 할당되었다는 것은 메모리 관점에서 비효율적입니다.
하지만 이벤트 핸들러를 <Tag/> 컴포넌트를 감싸고 있는 부모 요소인 <TagList/>에 등록하고,
이벤트 핸들러 내에서는 어떤 <Tag/> 컴포넌트에서 발생한 이벤트인지를 검사하는 코드를 작성한다면 결과적으로 하나의 이벤트 핸들러를 통해 이벤트를 처리할 수 있습니다.
따라서, 메모리 관점에서는 여러 태그의 이벤트를 다루는 이벤트 핸들러가 딱 하나만 존재하므로 더 효율적이라고 할 수 있습니다.
2. 추후 동적으로 추가될 수 있는 요소에 대해서 추가적으로 이벤트 핸들러를 할당할 필요가 없습니다.
현재 투데이 링크에서 <Tag/> 컴포넌트는 추후에 동적으로 추가되지 않기 때문에 해당되지 않는 문제이지만,
순수 자바스크립트를 통해 웹페이지를 구현할 때에는 충분히 고려할 수 있는 개선 방법이라고 생각합니다.
결론적으로, 이벤트 버블링과 이벤트 위임을 통해서 더 적은 메모리 사용, 유지 보수성 향상 관점에서 이점을 얻을 수 있었습니다.
기존 코드
개선된 코드
