React 요소 바깥 클릭 감지하기

React에서 요소 바깥을 클릭할 경우에 이벤트를 발생시켜야 하는 경우가 있다.

useRef로 DOM element를 참조하여 구현할 수 있다.

const wrapper = useRef<HTMLDivElement>(null);

useEffect(() => {
  const handleClickOutside = (e: MouseEvent) => {
    if (e.target instanceof Element && wrapper.current?.contains(e.target)) {
      //wrapper 내부의 요소일 경우의 callback 실행
      return;
    }
    //wrapper 외부의 요소일 경우의 callback 실행
  };
  window.addEventListener("click", (e) => handleClickOutside(e));
  return () => {
    window.removeEventListener("click", (e) => handleClickOutside(e));
  };
}, [wrapper.current]);

wrapper로 내부와 외부를 나눌 요소를 정의한다.

정의한 후 window 전역에 이벤트 핸들러를 추가한다.

이벤트 내부에서 이벤트 전파의 원리를 이용하여 contains 메소드를 통해 이벤트의 발생 위치를 검사한다.

이벤트의 발생 위치에 따라 콜백을 실행하면 된다.

그 후 useEffect에서 cleanup 함수로 전역에 추가된 이벤트를 제거해주면 된다.