React 외부 클릭시 모달 사라지게 하기

useRef를 이용해서 모달 외부 화면 클릭시, 모달이 사라지도록 구현해보고자 한다.

1. ref = useRef()

2. modalCloseHandler() 정의

3. useEffect 내에서 addEvenlistener, removeeventlistener 사용.

4. 모달 감싸는 element tag에 ref 적용.

const Comment = () => {
  const ref = useRef();//***** useRef 사용.
  const [modalFlag, setModalFlag] = useState(false);
  const modalCloseHandler = ({ target }) => {
    // 모달이 열려있고, ref 영역이 아닌 영역클릭시, 모달 닫기.
    if (modalFlag && !ref.current.contains(target)) setModalFlag(false);
  };
  useEffect(() => {
    document.addEventListener("mousedown", modalCloseHandler);
    // Cleanup the event listener, unmount 될 때, evenListener 제거해주기.
    return () => {
      document.removeEventListener("mousedown", modalCloseHandler);
    };
  }, [modalFlag]);

  return (
    <div>
      <div className={style.commentBox}>
            <h3 onClick={() => setModalFlag(true)}>...</h3>
            {modalFlag && ( // flag가 true일 때만, 모달이 보여짐.
              <div className={style.controlModal} ref={ref}>// ref넣어주기.
                <p className={style.editText}>수정</p>
                <p className={style.deleteText}>삭제</p>
              </div>
            )}
          </div>
    </div>
  );
};

export default Comment;