[JS] 캘린더 클릭시 모달 닫히는 현상 해결(+이벤트 버블링)

📌 문제 현상 

캘린더의 체크인 체크아웃 두 번 클릭을 해야 하는데 한 번만 클릭해도 캘린더가 닫히는 현상이 발생

문제현상 : 체크아웃 이 선택되기 전에 모달창이 닫힌다.

결론 : 이 현상은 이벤트 버블링 때문에 발생한 현상인데 이 것은 e.stopPropagation() 를 사용해서 해결했습니다.

 

💘 과정 

https://fe-developers.kakaoent.com/2022/220908-react-event-and-browser-event/

React 이벤트와 브라우저 이벤트

사실 이 문제를 만나기 전에 버스에서 커리 어리라는 어플을 통해서 

카카오 프론트 엔드 블로그에서 이벤트 캡처링 , 버블링 현상에 관한 글을 읽었습니다. 

 

근데 다음날 캘린더를 짜는데 캘린더가 클릭 시 바로 닫히는 현상을 마주했습니다.

이때 아 이거 어제 봤던 이벤트 버블링 현상인가?라는 판단을 했습니다. 

 

그러면 콘솔로그로 사용해서 이벤트가 어떤 식으로 전파되는지 확인해 보겠습니다. 

 모달창이 onClick 이벤트를 사용해서 열리고, 캘린더를 클릭 시 캘린더 가 onClick이벤트를 사용해서 찍히고 나서 캘린더를 클릭했던 onClick이벤트가 모달까지 전달되어서 모달이 onClick이벤트로 인해서 닫히는 현상인 것 을 발견했습니다.

 

그러면 이 것을 어떻게 해결해야 할까요 ?? 

 

어제 본 프론트 엔드 기술 블로그에서는 event.stopPropagation를 사용해서 이벤트를 막을 수 있다는 내용을 보았습니다.

 

이것을 적용하면 이벤트가 전파되는 것을 막을 수 있을까요?? 

더 이상 캘린더를 클릭해서 이벤트가 전파되지 않고 체크인, 체크아웃 이 잘 찍히는 것을 볼 수 있습니다!!