자바스크립트 + 리액트 디자인 패턴

143

Chapter 07_

자바스크립트 디자인 패턴

버블링은

DOM

계층 구조에서 발생한 이벤트 (예시: 클릭 )가 타깃 요소부터 최상위 요소까

지 이벤트 핸들러를 거슬러 올라가면서 처리되는 방식입니다. 버블링이 발생하면 이벤트는

가장 하위 레벨의 요소에 정의된 이벤트 핸들러부터 실행합니다. 그리고 상위 요소로 거슬러

올라가며 더 높은 레벨에 정의된 이벤트 핸들러도 실행합니다.

플라이웨이트는 이벤트 버블링 과정을 추가 조정하는 데에 사용할 수 있습니다. 다음 절, ‘예

시: 중앙 집중식 이벤트 핸들링’ 에서 더 자세히 살펴봅시다.

7.16.8

예시: 중앙 집중식 이벤트 핸들링

이번에 살펴볼 실전 예제에서는 사용자 액션 (예: 클릭, 마우스 오버 )에 따라 실행되는 비슷

한 동작을 가진 여러 비슷한 요소들이 있다고 가정해 봅시다.

일반적으로 아코디언 컴포넌트, 메뉴 그리고 리스트 기반의 위젯 같은 것들을 설계할 때

부모 컨테이너 내부의 각 링크 요소에 ‘클릭’ 이벤트를 바인딩하곤 합니다(예:

$('

ul

li

a

).

on

(...)

). 하지만 여러 요소들에 하나하나 클릭 이벤트를 바인딩하는 대신, 최상위 컨테

이너에 플라이웨이트를 부착하여 하위 요소로부터 전달되는 이벤트를 감지할 수 있습니다.

감지한 이벤트는 필요에 따라 간단하거나 복잡한 로직을 적용하여 원하는 기능을 구현하면

됩니다.

앞서 언급했던 컴포넌트 유형들 (예: 아코디언의 각 섹션)은 각 부분마다 반복되고 있기 때문

에 클릭된 각 요소의 동작은 꽤 비슷하거나 인접한 클래스와 관련이 있을 ...