useRef를 이용하여 모달 밖 클릭시 모달 창 닫기 구현

• 먼저 useRef를 이용하여 변수를 선언한다.

  const el = useRef();

• 선언한 변수를 이용하여 모달 창 상태를 변경하는 함수를 만든다.

const handleDeActiveModal = (event) => {
    if (activeModal && (!el.current || !el.current.contains(event.target))) {
      setActiveModal(false);
    }
  };

• 조건에 따라 열고 닫을 모달 박스에 ref 속성을 부여한다.

 <ModalBox activeModal={activeModal} ref={el}>

• useEffect를 이용하여 윈도우 객체에 이벤트 리스너를 이용하여 클릭시 위 함수를 실행하도록 한다.

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

• 즉 정리하자면, useRef를 이용하여 모달 박스에 el 변수를 선언하여 접근하고, useEffectf를 이용하여 윈도우 객체에 클릭 이벤트 리스너를 부여한다. 그리고 클릭시에 위치가 모달(el 변수)의 위치를 포함하지 않는다면 모달 상태를 false로 변경하게 되는 것이다.

참고자료
https://chach4.tistory.com/4