이벤트 버블링 막기

게시물 생성 페이지를 모달 창처럼 만드는 와중 필자는 이벤트 버블링 문제를 겪었다. 이벤트 버블링이란 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성이다. 

사진 출처 : https://ssimplay.tistory.com/460

[jQuery] 모달창 만들기

이런식으로 모달창이 있다고 했을 때 필자는 하얀색 모달창을 눌렀을 때는 현재 화면을 유지하고, 나머지 바깥쪽 화면을 눌렀을때 화면이 닫히도록 만들고 싶었다. 하지만 하얀색 모달창을 눌렀을때 역시 화면이 닫히는 현상이 발생했다. 그 이유는 하얀색 모달창을 덮고 있는 상위 검은색 화면을 클릭했을때 화면을 닫히도록 만들면, 그 하위에 있는 하얀색 모달창까지 이벤트가 전달되기 때문이었다. 이를 막기위해서 stopPropagation이라는 메서드를 활용하였다.

예시 :)

```

<div

  className = "modal-wrapper"

  onClick = "화면 닫히게하는 true, false 함수 실행"

>

   <div

      className = "modal"

      onClick = {(e) => { e.stopPropagation()}}

     >

   </div>

</div>

```