[React] 모달 영역 외부 클릭시 모달 닫기

const [modalOpen, setModalOpen] = useState<boolean>(false)
const el = useRef()



  useEffect(() => {
    window.addEventListener('click', handleCloseModal)

    return () => {
      window.removeEventListener('click', handleCloseModal)
    }
  }, [modalOpen])
  
  
    const handleCloseModal = (e: MouseEvent) => {
    if (modalOpen && e.target !== el.current) {
      setModalOpen(false)
    }
  }
  
  
  
  
  
     <HeaderModal open={modalOpen} close={closeModal} refData={el} /> //모달

 

모달 영역의 엘리먼트를 지정해주기 위해서는 useRef를 사용한다. 

 

useRef를 사용해 모달 영역의 레퍼런스를 지정해준 뒤,

 

click 이벤트가 일어났을 때 모달이 열려있고 클릭한 부분이 모달 영역 밖이라면 모달창을 닫아주면 된다.

 

이 때 이벤트가 한 번 실행 된 후 이벤트를 삭제해줘야 다음 실행 시 정상적인 state 값을 받아온다.