특정 요소 외부 영역 클릭을 감지하는 방법

React와 TypeScript를 사용하여 특정 요소 외부 영역 클릭을 감지하는 방법을 설명해드리겠습니다.

useOutsideClick 훅

import { useEffect, RefObject } from 'react';

function useOutsideClick<T extends HTMLElement = HTMLElement>(
  ref: RefObject<T>,
  handler: (event: MouseEvent | TouchEvent) => void
) {
  useEffect(() => {
    const listener = (event: MouseEvent | TouchEvent) => {
      if (!ref.current || ref.current.contains(event.target as Node)) {
        return;
      }
      handler(event);
    };

    document.addEventListener('mousedown', listener);
    document.addEventListener('touchstart', listener);

    return () => {
      document.removeEventListener('mousedown', listener);
      document.removeEventListener('touchstart', listener);
    };
  }, [ref, handler]);
}

설명

이 useOutsideClick 훅은 다음과 같이 작동합니다:

1. ref와 handler 함수를 매개변수로 받습니다.
2. useEffect를 사용하여 컴포넌트 마운트 시 이벤트 리스너를 추가하고, 언마운트 시 제거합니다.
3. 클릭 이벤트가 발생하면, 클릭된 요소가 ref로 지정된 요소의 외부인지 확인합니다.
4. 외부 클릭이 감지되면 handler 함수를 호출합니다.

사용 예시

import React, { useRef, useState } from 'react';
import { useOutsideClick } from './useOutsideClick';

const Dropdown: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  useOutsideClick(dropdownRef, () => {
    if (isOpen) setIsOpen(false);
  });

  return (
    <div ref={dropdownRef}>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && (
        <ul>
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
        </ul>
      )}
    </div>
  );
};

export default Dropdown;

 

이 예시에서는 드롭다운 컴포넌트를 구현했습니다.

useOutsideClick 훅을 사용하여 드롭다운 외부를 클릭하면 드롭다운이 닫히도록 구현되어 있습니다.