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
훅은 다음과 같이 작동합니다:
ref
와handler
함수를 매개변수로 받습니다.useEffect
를 사용하여 컴포넌트 마운트 시 이벤트 리스너를 추가하고, 언마운트 시 제거합니다.- 클릭 이벤트가 발생하면, 클릭된 요소가
ref
로 지정된 요소의 외부인지 확인합니다. - 외부 클릭이 감지되면
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
훅을 사용하여 드롭다운 외부를 클릭하면 드롭다운이 닫히도록 구현되어 있습니다.
댓글