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

rect modal의 바깥 창을 눌렀을 때 닫히게 하는 방법이다. wrapper 를 사용하는 방법이 있고 ref 를 사용하는 방법이 있는데 ref를 사용했다.

import { useState, useRef, useEffect } from "react";

const MyComponent = () => {
  const [actionModal, setActionModal] = useState(false);
  const node = useRef();

  useEffect(() => {
    const clickOutside = (e) => {
      // 모달이 열려 있고 모달의 바깥쪽을 눌렀을 때 창 닫기
      if (actionModal && node.current && !node.current.contains(e.target)) {
        setActionModal(false);
      }
    };

    document.addEventListener("mousedown", clickOutside);

    return () => {
      // Cleanup the event listener
      document.removeEventListener("mousedown", clickOutside);
    };
  }, [actionModal]);

  return (<div ref={node}>
    <div
      className="flex shrink-0 pointer"
      onClick={() => setActionModal((pre) => !pre)}
    >
      <img src="/images/more_horiz_black_24dp.svg" />
    </div>
    {actionModal ? (
      <div
        style={{
          position: "fixed",
          backgroundColor: "white",
          padding: "0.625rem",
          border: "1px solid grey",
          zIndex: 10,
          borderRadius: "4px",
        }}
      >
        <div className="p-10">action sheet</div>
        <div className="p-10">action sheet</div>
        <div className="p-10">action sheet</div>
      </div>
    ) : null}
  </div>)
}

export default MyModal;