[리액트] 모달창 외부 클릭 시, 꺼지게 하기

웹 개발을 하게 되면, 모달창을 불가피하게 만들어야 하는 상황이 찾아오곤 합니다.
하지만, 단순히 창을 껐다 켰다 하면 속 편하겠지만, 모달창 외부를 클릭했을 때, 모달창을 꺼지는 기능을 만들어야 깔끔합니다.
이번에는 모달창 외부 클릭 시 On/Off를 만들어 볼 예정입니다.

 

 

문서 구조

App.js 전체 코드

import "./styles.css";
import React, {useState, useEffect,useRef } from 'react';
import Modal from "./modal.js"
export default function App() {
  const [ModalState, setModalState] = useState('false'); //모달창의 상태를 보관해 둘 useState입니다.

  function OnOffModal(){ //모달창 상태를 변경하는 함수입니다.
    if(ModalState===true){
      setModalState(false);
    }else{
      setModalState(true);
    }
  }
  return (
    <div className="App">
      <h1>모달창 예제</h1>
      <button onClick={OnOffModal}>모달창 켜기</button>
      {ModalState === true ? //모달 상태가 true면 1번, false면 2번이 작동합니다.
      <div style={{display:"flex",position:"fixed",top:"0",left: "0", bottom: "0", right: "0",justifyContent:"center",alignItems:"center", zIndex : "100"}}>
        <Modal setModalState={setModalState}/> 
      </div>
      
      : ""}
      
    </div>
  );
}

Modal.js 전체 코드

import React, {useState, useEffect,useRef, forwardRef, } from 'react';


const modal = forwardRef((props, ref) =>{
  let wrapperRef = useRef(); //모달창 가장 바깥쪽 태그를 감싸주는 역할

    useEffect(()=>{
      document.addEventListener('mousedown', handleClickOutside);
      return()=>{
        document.removeEventListener('mousedown', handleClickOutside);
      }
    })
    const handleClickOutside=(event)=>{
      if (wrapperRef && !wrapperRef.current.contains(event.target)) {
        props.setModalState(false);
      }
    }

    function BtnEvent(){
      alert('모달창 내부 작업을 해도 모달창이 꺼지지 않습니다.');
    }
 
      return (
        <div ref={wrapperRef} style={{width:"300px", height:"300px", border:"1px solid",}}>
         
          <button onClick={BtnEvent}>
            모달창 버튼
          </button>
        </div>
      )
  
});

export default modal;