[React] OutSide Click

Modal 과 같이 특정영역을 제외한 외부영역을 클릭했을때 Modal 이 꺼지는 것처럼, 지정한 로직을 수행하는 Custom Hook을 정리해볼려고한다.

import { RefObject, useEffect } from 'react';

/**
 *  @hooks
 *  외부클릭시 콜백함수 실행하는 customHooks
 */
export default function useHandleOutsideClick(
  refArray: RefObject<HTMLElement>[],
  callback: () => void,
) {
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      // 클릭한 영역이 지정한 영역의 외부인지 판단
      const isOutsideClick = refArray.every((ref) => {
        return ref.current && !ref.current.contains(event.target as Node);
      });
	
      // 지정한 영역이 아니라면 callback 실행
      if (isOutsideClick) {
        callback();
      }
    };
    document.addEventListener('click', handleClickOutside);

    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, [refArray, callback]);
}

위와 같이 원하는 영역()의 ref 배열과 외부영역을 클릭했을때 실행할 callback 을 인자로 받는 Custom Hook을 구현한 예시이다.
이벤트 리스너로 클릭 이벤트를 추가해주었고, 클릭시 마다 해당 로직을 수행한다.

사용법은 아래와 같다.

  const buttonRef = useRef<HTMLButtonElement>(null);
  const modalRef = useRef<HTMLDivElement>(null);

  const [openModal, setOpenModal] = useState(false);

  useHandleOutsideClick([modalRef, buttonRef], () => {
    setOpenModal(false);
  });

  return (
  	<div>
    	<button ref={buttonRef} onClick={() => {setOpenModal(true)}}>버튼</button>
		<Modal ref={modalRef} openModal={openModal} />
    </div>
  )

여기서는 Modal을 열기전 Button을 클릭했을시에 Modal을 닫는 로직을 수행하면 안되기 때문에, buttonRef도 지정해 넘겨주었다.