React 컴포넌트 특정 영역 외 클릭 감지

	const mymenuRef = useRef(null);

    function closeMyMenuOnOutside(ref: any) {
        useEffect(() => {
            function handleClickOutside(e: any): void {
                if (ref.current && !ref.current.contains(e.target)) {
                    closeMyMenu(myMenuDispatch);
                }
            }
            document.addEventListener('mousedown', handleClickOutside);
            return () => {
                document.removeEventListener('mousedown', handleClickOutside);
            };
        }, [ref]);
    }

    closeMyMenuOnOutside(mymenuRef);

    return (
        <MenuContainer ref={mymenuRef}>
    )

 

 

handleClickOutside에서 (e: MouseEvent) 를 주니 에러 발생.

(e: any): void 로 입력하니 잘됨

 

 

 

> type에 any를 쓰지 않도록 수정

> 발생한 에러들

 

 

// 해결
useRef<HTMLDivElement>(null);

 

 

// 해결
if (myMenuRef.current && !myMenuRef.current.contains(e.target as Node)) {

 

 

> 최종소스

 

useEffect(() => {
        function handleClickOutside(e: MouseEvent): void {
            if (myMenuRef.current && !myMenuRef.current.contains(e.target as Node)) {
                closeMyMenu(myMenuDispatch);
            }
        }
        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [myMenuRef]);

 

 

addEventListener() : 이벤트가 대상에 전달될 때마다 호출할 함수를 설정

mousedown : 포인터가 요소의 내부에 있는 동안 포인팅 장치의 버튼을 누를 때.

참고 : 이는 전체 클릭 작업이 발생한 후 시작되는 click이벤트 와 다릅니다. click은 마우스 버튼을 눌렀다 놓았을 때 시작합니다. mousedown는 버튼을 처음 누르는 순간 시작됩니다.

 

 

 

 

codesandbox.io/s/outside-alerter-hooks-forked-6rjq4?file=/src/OutsideAlerter.js

Outside Alerter - Hooks (forked) - CodeSandbox

 

qastack.kr/programming/32553158/detect-click-outside-react-component

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

 

developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener()

 

developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event

Element: mousedown event