리액트 - 모달 창 바깥 클릭하면 창 닫기

글 제목 입력창 클릭 시 글 내용 입력창이 나타나도록 하였다.

<Stack className="writeForm"
      direction="horizontal"
      onClick={() => setIsContentInputVisible(true)}

---

useRef를 이용해서 input을 감싼 박스를 선택한다.

  const contentInputNode = useRef();

<Stack className="writeForm"
      direction="horizontal"
      onClick={() => setIsContentInputVisible(true)}
      ref={contentInputNode}>

---

useEffect로 document에 mousedown 이벤트를 생성한다.

클릭 이벤트가 실행되며 모달창이 나타날 때

=> (onClick={() => setIsContentInputVisible(true))

 

mousedown이 함께 실행되고,

=> (document.addEventListener("mousedown", clickOutside))

 

클릭한 node가 form을 포함하고 있지 않다면 창을 모달창이 닫히게 된다.

=> (!contentInputNode.current.contains(e.target))

 

 

  useEffect(() => {

    // 모달이 열려 있고 모달의 바깥쪽을 눌렀을 때 창 닫기

    const clickOutside = (e) => {

      if (isContentInputVisible && !contentInputNode.current.contains(e.target)) {

        setIsContentInputVisible(false);

      }

    };

    document.addEventListener("mousedown", clickOutside);

    return () => {

      // Cleanup the event listener

      document.removeEventListener("mousedown", clickOutside);

    };

  }, [isContentInputVisible]);

 

 

 

https://tilnote.io/pages/623eefea74b8f48522c984a5

react modal 밖을 눌렀을 때 modal 창 닫기 (useRef 버전)