[React] 특정 엘리먼트 '외부'를 클릭했을 때 특정 함수를 실행하도록 하는 이벤트 바인더 (when click outside of element trigger event) [메뉴, 자동완성 구현 등에 사용]

공통 스크립트

/**
 * 특정 엘리먼트 '외부'를 클릭했을 때 특정 함수를 실행하도록 하는 이벤트 바인더
 */
export const useBindClickOutside = (ref: React.RefObject<HTMLElement>, onClickOutside: (e: React.MouseEvent) => void) => {
  useEffect(() => {
    // Invoke Function onClick outside of element
    const handleClickOutside = (e: any) => {
      if (ref.current && !ref.current.contains(e.target)) {
        onClickOutside(e);
      }
    };
    document.addEventListener('mousedown', handleClickOutside); // bind
    return () => {
      document.removeEventListener('mousedown', handleClickOutside); // dispose
    };
  }, [ref, onClickOutside]);
};

사용 예시

  /**
   * 자동완성 폼을 제외한 외부 영역 클릭시 자동완성 options 목록을 숨기기 위한 이벤트 바인딩
   */
  useBindClickOutside(autocompWrapRef, () => {
    setShow(false);
  });

이미 구현된 라이브러리가 있었다.

Click-Away Listener (ClickAwayListener)
- 주의: ClickAwayListener 직계자손으로 react element를 넣으면 작동하는데, fragment를 넣었을 경우는 작동하지 않았음.
react-onclickoutside