예전에 outside click 시 떠있는 modal, popup 등 없애기를 구현한 적이 있다 그때는 js 를 잘 다루지 못해서인지 아니면 정말 길게 코드를 작성하고 모달마다 팝업마다 해당 로직을 구현해 참 복잡하게 했던 기억이 있다.

하지만 조금 성장을 해서인가 ㅠㅠㅠ 사실 지금 좀 감동적이다. 진짜되서 와 이게 되네? 을 반복해서 했다.

이 코드가 e.stopPropagation(); 를 사용해서 모든 상황에서 적용할 수 없을 수도 있지만 너무 간단하게 적용되기에 남겨보려 한다.

js

코드

let currentShowingElement;

whenClickMakeSomethingVisibleElement.addEventListener('click', (e) => {
  e.stopPropagation();
  if (!!popupItem) popupItem.style.visibility = 'hidden';
  currentShowingElement = visibledElement;
  visibledElement.style.visibility = 'visible';
});

const body = document.querySelector('body');
body.addEventListener('click', () => {
  if(!!currentShowingElement){
    currentShowingElement.style.visibility = 'hidden';
    currentShowingElement = ''
  }
});

구현 로직

• currentShowingElement = 현재 popup 이나 떠있는 창
• whenClickMakeSomethingVisibleElement = 해당 요소를 클릭했을 때 visibledElement 를 보여주게 만드는 요소
• visibledElement = visibility 를 변화시켜 보여줄 요소(나중에 바깥을 눌렀을때 없앨 요소)

1. 1-1. e.stopPropagation(); 를 설정하여 클릭이벤트가 버블링되어 body 태그까지 인직되지 않게한다.
   주의 !! (만약 click 이벤트로 다른 요소에 focus 를 주고 그 focus 이벤트로 visibledElement에 visibility 를 변화시켜야하는경우 -> click 이벤트가 발생하는 요소에 e.stopPropagation(); 를 설정해주어야 함을 주의하자!)

   1-2. 만약 페이지에 2개 이상의 요소가 visibledElement가 될 수 있다면 whenClickMakeSomethingVisibleElement 에 click 이벤트 콜백함수에서
   if (!!popupItem) popupItem.style.visibility = 'hidden';
   코드를 작성해주어 현재 popup 되어있는 요소를 없애고 1-3 을 작업해야한다.
   (이 코드가 있어야 팝업 위에 팝업이 겹쳐지거나, 두번째 팝업만 닫히고 그전 팝업은 계속 살아있는 불상사가 생기지 않는다. => 한번에 한개의 popup 만 보이게 한다.)

   1-3. whenClickMakeSomethingVisibleElement 에 click 이벤트 콜백함수에서 visibility 를 변화시킨 요소를 전역 변수 currentShowingElement에 넣는 코드를 추가로 작성한다.

2. 2-1. body 에 클릭이벤트를 추가하고
   2-2. 만약 현재 currentShowingElement 에 요소가 있다면 해당 요소를 숨기고
   2-3. currentShowingElement 를 비워준다!

구현

• whenClickMakeSomethingVisibleElement(보여주고 싶은 요소를 보여주는 버튼)을 누르면 계속 요소 보임
• visibledElement 내부도 클릭해도 계속 요소 보임
• whenClickMakeSomethingVisibleElement, visibledElement이 아닌 해당 요소 밖 클릭 시 바로 보여지던 요소 사라짐

조금의 성장이지만 성장을 느낄 수 있어 너무 감사한 코드였다!!! 계속 성장하고 있어!! 화이팅!!

React outside click 창닫기 블로그글