React 모달 영역 밖 클릭시 닫기

const el = useRef();
const [isOpen, setOpen] = useState(false);

const handleCloseModal= e => {
 if (isOpen && (!el.current || !el.current.contains(e.target))) setOpen(false);
}

useEffect(() => {
  window.addEventListener('click', handleCloseModal);
  return () => {
    window.removeEventListener('click', handleCloseModal);
  };
}, []);

return (
  {
   isOpen && 
   <Modal ref={el}>
      ...
   </Modal >
  }
);

window 객체에 target이 ref에 할당한 요소에 포함되어 있으면 click 이벤트가 발생하여 조건에 따라 상태값을 변경하는 콜백 함수를 실행한다.

 

출처: 모달 영역 밖 클릭시 쉽게 닫기 (velog.io)