[ React / popup ] popup 열고/닫고 (Feat.stopPropagation)

팝업을 만들고 position : absolute로 띄우면 현재 창에서 레이어의 높이로 팝업을 띄울 수 있다. 그렇다면 닫기는 어떻게 하면 좋을까?

 

방법은 여러가지가 있겠지만 띄운 레이어 밖을 누르면 가능으로 야기 해보겠다.

e.stopPropagation()

stopPropagation() : 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다.

출처 : https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation

 

popup을 클릭했을 때, 버블링 현상으로 띄워진 popup을 방지 할 것

1. 팝업 전체

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

 

2. popup button 클릭 시

여기서는 handler function을 넣어서 e.stopPropagation()로 버블링 현상 방지

 

 

popup 외 클릭시 팝업창 닫기

- window 함수를 활용해서 닫기 버튼을 시전한다.

'use client'
...


useEffect(()=>{
  const closePopup = () => setIsCalenderOn(false); // 함수 입니다.
  if(IsCalenderOn){
    window.addEventListener('click', closePopup)
    return () => window.removeEventListener('click', closePopup) // cleanup 함수
},[ IsCalenderOn ])

 

정리하면,

stoppropagation으로 버블링 현상을 막고 browser 함수를 통해서 브라우저를 클릭시 닫기를 시전한다.