[javascript] React 컴포넌트 외부의 클릭 감지

http://daplus.net/javascript-react-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%99%B8%EB%B6%80%EC%9D%98-%ED%81%B4%EB%A6%AD-%EA%B0%90%EC%A7%80/

코드 자세히

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

/**
 * Hook that alerts clicks outside of the passed ref
 */
function useOutsideAlerter(ref) {
  useEffect(() => {
    /**
     * Alert if clicked on outside of element
     */
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        alert("You clicked outside of me!");
      }
    }

    // Bind the event listener
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
}

/**
 * Component that alerts if you click outside of it
 */
export default function App(props) {
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef);

  return <div ref={wrapperRef}>Fuck{props.children}</div>;
}