지정한 요소 외부에서 클릭 이벤트가 발생하면 콜백 함수를 호출하는 훅입니다. 여러 개의

ref

를 배열로 전달할 수 있습니다.

구현

import { type RefObject, useEffect } from 'react';

export function useOutsideClickEffect<T extends HTMLElement>(
  callback: () => void,
  refDeps: RefObject<T | null>[],
): void {
  useEffect(() => {
    const listener = (e: MouseEvent) => {
      const isClickInside = refDeps.some(ref => ref.current?.contains(e.target as Node));

      if (isClickInside) return;

      callback();
    };

    document.addEventListener('click', listener);

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

사용법

1. 단일 요소 외부 클릭 감지

function Dropdown() {
  const dropdownRef = useRef<HTMLDivElement>(null);

  useOutsideClickEffect(() => {
    console.log('드롭다운 외부 클릭');
    closeDropdown();
  }, [dropdownRef]);

  return <div ref={dropdownRef}>...</div>;
}

2. 여러 요소 외부 클릭 감지

const triggerRef = useRef<HTMLButtonElement>(null);
const menuRef = useRef<HTMLDivElement>(null);

// triggerRef, menuRef가 아닌 외부를 클릭하면 콜백 호출
useOutsideClickEffect(() => {
  closeMenu();
}, [triggerRef, menuRef]);

<button ref={triggerRef}>열기</button>
<div ref={menuRef}>메뉴</div>

참조

toss/slash - useOutsideClickEffect