React

코드

  const [currentPopup, setCurrentPopup] = useState('');

  const onPopup1BtnClick = (e) => {
    e.stopPropagation();
    setCurrentPopup('popup1');
  };

  const onPopup2BtnClick = (e) => {
    e.stopPropagation();
    setCurrentPopup('popup2');
  };
  const onBodyClick = (e) => {
    !!currentPopup && setCurrentPopup('');
  };
  
  return (
  <>
      <div className="body" onClick={(e) => onBodyClick(e)}>
      </div>
      
      <div className="popup1Btn" onClick={(e) => onPopup1BtnClick(e)}></div>
      <div
       className="popup1"
       style={{ visibility: currentPopup === 'popup1' ? 'visible' : 'hidden'}}>
      </div>
      
      <div className="popup2Btn" onClick={(e) => onPopup2BtnClick(e)}></div>
      <div className="popup2" style={{visibility: currentPopup === 'popup2' ? 'visible' : 'hidden'}}
  </>
      )

구현 로직

• currentPopup = 현재 펍업된 요소이름
• onPopupBtnClick = popupBtn 클릭이벤트에 넣을 콜백함수
• popupBtn = Popup2을 팝업 시키는 버튼
• popup = 팝업되는 요소
• onBodyClick = body(혹은 가장 상위의 노드) 클릭이벤트에 넣을 콜백함수

1. useState 을 통해 현재 popup 되고 있는 창을 저장합니다.
2. 팝업을 열 때 해당 요소 이름이 currentPopup 가 되도록 합니다.
   setCurrentPopup(해당 요소 이름)
3. currentPopup와 해당 요소의 이름이 같다면 보여주도록 합니다.
   style={{ visibility: currentPopup === 'popup1' ? 'visible' : 'hidden'}}>
   (이 부분으로 인해 기존에 열려있던 팝업 창은 닫히고 현재 열려고 한 팝업창만 보입니다.)
4. body 부분을 클릭 시 만약 팝업 되어 있는 요소가 있을 때는 currentPopup 을 빈칸으로 만들어 어떤 팝업 요소도 보이지 않게 합니다.. 이로서 모든 창이 닫히고 기존의 화면만 보이게 됩니다.
   !!currentPopup && setCurrentPopup('');

구현

• popup 요소 내부 클릭시 계속 열려있음
• popup 이외 body 부분 클릭시 닫힘
• 언제나 한개의 popup 창만 보이게 함

js outside click 창닫기 블로그글