모달 영역 밖 클릭시 닫기

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

const handleClickOutside = ({ target }) => {
    if (isOpen && !modalEl.current.contains(target)) setOpen(false);
  };

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

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

window 객체에 click 이벤트를 걸어 target이 ref에 할당한 요소에 포함되어 있는지 확인하고 조건에 따라 상태값을 변경하는 함수를 호출한다.

모달 특성상 컴포넌트가 unmount 되는 주기가 많으므로 useEffect 부수 효과 함수안의 리턴문을 통해 click 이벤트를 remove 한다.