[JS 코드 리팩토링] 버블링을 활용한 이벤트 위임 구현

1. 배경

하단 네비게이션바 이미지

기존 하단 네비게션바에서는 아래 코드처럼 각 자식 요소에서 페이지 이동 이벤트를 처리했다.

이 부분의 코드를 리팩토링하려고 한다.

 

<!--기존 예시-->
<!--navigate: 페이지 이동하는 함수-->
<nav>
    <span onClick={() => navigate("/barcode")}>바코드 대출</span>
    <span onClick={() => navigate("/share")}>공유도서</span>
    <span onClick={() => navigate("/home")}>홈</span>
    <span onClick={() => navigate("/chat")}>채팅</span>
    <span onClick={() => navigate("/mypage")}>마이페이지</span>
</nav>

 

---

2. 설명 (버블링, 이벤트 위임)

 

각 자식 요소에서는 ①클릭 이벤트를 감지하고 ②페이지를 이동한다는 공통점이 있다.

그래서 이 부분들을 부모 요소에서 처리하도록, 버블링을 활용하여 이벤트 위임을 구현해보려고 한다.

 

# 버블링 (Bubbling)
자식 요소에서 이벤트가 발생하면 해당 요소의 이벤트 핸들러가 동작하고,
부모 요소 방향으로 이벤트가 번지면서 부모(조상) 요소의 이벤트 핸들러가 동작하는 현상.

# 이벤트 위임 (Event Delegation)
비슷한 방식으로 처리하는 자식 요소의 이벤트들을 부모 요소에게 제어권을 넘기는 방식.

 

---

3. 이벤트 위임 구현

 

① 먼저, 각 자식 요소의 name 속성에 목적지인 path를 넣어주었다.

 

② 부모 요소에서는 자식 요소에 이벤트가 발생할 경우, 이벤트가 발생한 요소의 name 속성값을 확인한다.

예) e.target.getAttribute('name');

그리고 페이지 이동 함수(여기서는 navigate 함수)를 사용하여 페이지를 이동하도록 했다.

 

<!--리팩토링 예시-->
<!--navigate: 페이지 이동하는 함수-->
<nav onClick={(e) => navigate(e.target.getAttribute('name'))}>  //②
    <span name="/barcode">바코드 대출</span>  //①
    <span name="/share">공유 도서</span>
    <span name="/home" }>홈</span>
    <span name="/chat">채팅</span>
    <span name="/mypage">마이페이지</span>
</nav>

 

---

4. 이벤트 위임 장점

1. 부모 요소에만 이벤트 핸들러를 할당하면 되기에, 초기화가 단순해지고 메모리 절약의 효과가 따른다.
2. 자식 요소에는 직접 핸들러를 추가할 필요가 없기 때문에 코드가 짧아진다.