프로젝트를 진행하면서 상단 메뉴바의 UI를 구현 하면서 모바일 환경에서 페이지에 접속하는 상황을 염두하여 반응형 웹으로 페이지를 설계했다.

화면의 가로 길이가 700px 이상일 경우에는 위와 같이 렌더링 되지만..

700px 이하로 감소했을 때는 상단 메뉴바가 이렇게 축소된다.

1. 공간이 좁다..

메뉴바가 축소되고보니, 홈페이지 로고와 메뉴 이동 버튼 그리고 회원 기능쪽 버튼을 모두 배치할 수 없을 정도로 영역이 좁아져버렸다.

로고나 버튼 모두 반드시 필요한 요소들인 만큼 무엇 하나 빠질 수가 없다보니, 고민 끝에 가로 700px 이하 환경에서는 상단 메뉴바가 드롭다운 형식의 메뉴로 바뀌도록 UI의 방향성을 바꾸어보았다.

축소된 상단 메뉴바 UI 가운데 위치한 버튼을 클릭할 경우..

이렇게 홈페이지 로고와 메뉴 이동 버튼 그리고 회원 기능쪽 버튼들이 하단 방향으로 출력되고, 이 상태에서 상단 메뉴바 버튼을 다시 클릭하면 이들이 다시 사라지도록 구현하였다. 생각보다 구현이 빠르게 잘 되서 기분이 좋았고, 기능도 테스트해보니...

2. 제대로 동작하지 않는다!

드롭다운 메뉴가 출력되었을 때는, 상단 메뉴바 버튼을 클릭 할 때만 드롭다운 메뉴가 사라져야한다. 그런데 드롭다운에 위치한 홈페이지 로고와 메뉴 이동 버튼 그리고 회원 기능쪽 버튼들을 클릭하였을 때도 드롭다운 메뉴가 사라지는 버그가 발생하였다!

처음에는 내가 다른 HTML 태그에 onClick 속성을 사용했다고 생각해서 코드를 다시 살펴보았는데, 제대로 된 태그에 속성이 사용되고 있었고 이 알 수 없는 현상을 해결하는데 상당한 시간을 소모해야 했다.

3. 이벤트 버블링!

나중에 안 사실이지만, 이 버그는 자바스크립트의 이벤트 버블링bubbling 현상에서 비롯된 것이었다.

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.

<TitleAndMenuArea onClick={드롭다운메뉴내리는함수}>
     <DropDownMenu>
          <DownMenuTitle onClick={상단메뉴바버튼함수}/>
     </DropDownMenu>
</TitleAndMenuArea>                       
                  
                   

여기서 드롭 다운 메뉴를 나타내고 사라지게 하는 onClick 함수는 TitleAndMenuArea에 적용되었고, 드롭 다운 메뉴 내부에서 메뉴 이동 등의 역할을 하는 함수들은 DownMenuTitle에 적용되어 있었다.

여기서 이벤트 버블링bubbling 현상에 의해서 자식 태그인 DownMenuTitle에서 이벤트가 동작하자, 부모 태그인 TitleAndMenuArea의 이벤트까지 덩달아 동작해버린 것이다.

4. 버블링을 멈추어라.

문제 해결 방법은 간단했다. 이벤트 버블링 현상이 발동하면 안되는 지점에서 event 객체의 메소드인 stopPropagation() 함수를 호출할 경우 이벤트 버블링 현상이 발동되는 것을 방지할 수 있다.

<TitleAndMenuArea>
     <DropDownMenu>
          <DownMenuTitle onClick={(event) => event.stopPropagation()}/>
     </DropDownMenu>
</TitleAndMenuArea>           
                   

해결책을 적용하고.. 문제가 해결된 것을 확인하였다!