Modal 만들기 : Event propagation

프로그래머스 2020 Dev-Matching : 웹 프론트엔드 과제 복기
https://github.com/woohyeonjo/ilovecat

웹 프로젝트를 하면 Modal을 빼놓을 수 없다. 유저와 서비스가 상호작용하도록 만드는 굉장히 유용한 방법이기 때문이다. 자주 만들어서 그런지 어렵지 않게 만들 수 있고 Bootstrap과 같은 다양한 UI 컴포넌트 프레임워크에서도 많이 제공하기 때문에 별 생각없이 사용해왔다. 하지만, Modal에서도 중요한 배울점이 있었다. 바로 자바스크립트의 Event Bubbling과 Event Capture다.

단순하게 alert창을 만든다면 그리 신경 쓸 구석이 없다. 하지만

• Modal 내부에서 다양한 이벤트가 필요할 때
• Modal 외부를 클릭했을 때 Modal을 숨기고자 할 때

처럼 이벤트가 쓰이기 시작하면 자바스크립트의 이벤트 전파에 의해서 힘든 상황을 겪게 될 것이다. 이 블로그에 잘 정리되어 있다.

Modal 밖 클릭하여 숨기기 - Overlay

Wrapper (실제 Modal창 밖 화면 전체를 감싸는 부분, 위 사진의 검은 부분)
  ㄴ Contents (실제 Modal창)

위와 같이 구성했을 때 Modal 밖을 클릭하여 Modal을 숨기려하면 Wrapper에 이벤트를 달아야할 것이다. 하지만 이렇게 하면 Contents 내부에서 클릭 이벤트가 발생했을 때 Bubbling이 발생하여 Wrapper의 클릭 이벤트도 작동시켜 Modal이 숨겨지게 될 것이다.

그럼 이벤트 전파를 막는 메서드 event.stopPropagation()을 사용하면 될까? 물론 가능하지만 되도록이면 인위적으로 이벤트 전파를 막는 것은 좋지 않다고 한다(추후 이벤트 전파를 활용해야하는 경우를 염려). 그래서 사용하는 것이 바로 Overlay다.

Wrapper (실제 Modal창 밖 화면 전체를 감싸는 부분, 위 사진의 검은 부분)
  ㄴ Overlay (Wrapper 위에서 화면 전체를 감싸는 부분)
  ㄴ Contents (실제 Modal창)

위와 같이 구성하면 어떻게 될까? 이벤트 전파는 부모자식간에만 일어난다. 그 점을 이용해서 Overlay라는 형제를 두고 Modal 숨기기 이벤트를 걸어두는 것이다. 그러면 Contents를 클릭했을 때 Bubbling이 일어나지만 이벤트가 Overlay에 걸려있기 때문에 창이 꺼지지 않는다.

Modal 띄우기, 숨기기

Modal을 숨기는 가장 좋은 방법은 CSS를 사용하는 것이 아닐까 CSS를 사용해서 엘리먼트를 숨기는 방법은 두 가지가 있다.

• display: none
  엘리먼트가 차지하는 공간 자체를 숨긴다.
• visibility: hidden
  엘리먼트는 보이지 않지만 공간을 차지하고 있다.

여기서는 visibility: hidden을 사용하였다. 이 속성을 자바스크립트를 사용해서 토글하면 된다.

  toggleModal(){
      ...
      const modal = document.querySelector('.modal-wrapper');
      modal.classList.toggle('hidden');
      ...
  }