useOutsideClickEffect

useOutsideClickEffect는 지정된 컨테이너 외부에서 클릭 이벤트가 발생할 때 콜백을 트리거하는 리액트 훅이에요. 모달, 드롭다운, 툴팁 및 다른 UI 컴포넌트를 외부 클릭 시 닫는 데 유용해요.

인터페이스

function useOutsideClickEffect(
  container: HTMLElement | (HTMLElement | null)[] | null,
  callback: () => void
): void;

파라미터

• containerrequired · HTMLElement | (HTMLElement | null)[] | null
  

  단일 HTML 요소, HTML 요소나 null을 담은 배열 또는 null이에요. 배열의 null은 무시돼요. HTML 요소가 하나도 남지 않으면 콜백이 실행되지 않아요.

• callbackrequired · () => void
  

  지정된 컨테이너 외부를 클릭할 때 실행되는 함수예요.

반환 값

이 함수는 아무것도 반환하지 않아요.

예시

import { useOutsideClickEffect } from 'react-simplikit';
import { useState } from 'react';

function Example() {
  const [wrapperEl, setWrapperEl] = useState<HTMLDivElement | null>(null);

  useOutsideClickEffect(wrapperEl, () => {
    console.log('외부 클릭했어요!');
  });

  return <div ref={setWrapperEl}>내용</div>;
}