이벤트 전파를 막아주는 e.stopPropagation

먼저 이벤트 버블링과 캡쳐링의 간단한 개념은 아래와 같다.

이벤트 버블링

특정 요소에서 이벤트가 발생했을 때, 해당 요소의 상위 요소로 이벤트가 전파되는 현상

---

이벤트 캡쳐링

이와 반대로 상위 요소에서 하위 요소 순로 이벤트가 전파되는 현상

---

e.stopPropagion

이 함수를 호출하면 원하는 요소에서만 이벤트를 처리하고 그 이상의 전파를 막을 수 있다.

사용 전

// SidebarOrganism.tsx
	...
// SidebarWrapper or Close 클릭 시 side bar 닫기
  const handletoggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);

    // side bar를 닫을 때 setTimeOut 시간 후 sidebarWrapper를 없애주기
    if (!sidebarOpen) {
      setTimeout(() => {
        dispatch(toggleSidebar());
      }, 200); // 애니메이션의 지속 시간과 같게 설정하면 깜빡임 발생함
    }
  };
...
return (
    <SidebarWrapper onClick={handletoggleSidebar}>
      <Sidebar
        animation={sidebarOpen ? slideOut : slideIn}
      >
        ...
      </Sidebar>
    </SidebarWrapper>
  );

기존 SidebarWrapper와 close button을 선택하면 사이드바(모달)이 닫히게했었는데, 이 경우에 사이드바 내부에서 클릭 이벤트가 발생하면 SidebarWrapper까지 전달되어 의도치 않게 사이드바가 닫히게 된다.

사용 후

return (
    <SidebarWrapper onClick={handletoggleSidebar}>
      <Sidebar
        animation={sidebarOpen ? slideOut : slideIn}
        onClick={(e: React.MouseEvent) => e.stopPropagation()}
      >
        ...
      </Sidebar>
    </SidebarWrapper>
  );

의도한대로 SidebarWrapper나 close button 클릭 시에만 사이드바가 사라진다.

---

+ e.preventDefault

이 녀석은 a 나 submit 태그가 가진 고유 동작을 중단시키는 메서드이다.

---

reference

• 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지