useOutSideClick

Introduction

이 useOutSideClick 훅은 외부 클릭을 감지를 통해서, 외부를 클릭했을때, 콜백함수를 통해서 다음의 동작을 구현하도록 하기 위해 만들어 졌습니다.

Example

import React, { useRef } from "react";

function OutsideClickExample() {
  // 클릭을 감지하고자 하는 대상 요소에 대한 Ref를 생성합니다.
  const targetRef = useRef(null);

  // 외부 클릭 감지 시 실행될 콜백 함수를 정의합니다.
  const handleOutsideClick = () => {
    console.log("대상 요소 외부를 클릭했습니다!");
  };

  // Ref와 콜백 함수를 사용하여 훅을 적용합니다.
  useOutSideClick(targetRef, handleOutsideClick);

  return (
    <div>
      <p>이 상자 외부를 클릭하면 콜백이 트리거됩니다.</p>
      <div ref={targetRef} style={{ border: "1px solid black", padding: "10px" }}>
        대상 요소
      </div>
    </div>
  );
}

export default OutsideClickExample;

다음의 예시 코드는 컴포넌트의 테두리 상자 외부를 클릭하면 콘솔에 메시지가 표시됩니다.

• OutsideClickExample 컴포넌트는 useOutSideClick 훅의 사용법을 보여줍니다.

• <div> 요소에 대한 ref(targetRef)를 생성하고 이를 useOutSideClick 훅에 전달합니다.

• 간단한 콘솔 메시지를 로그하는 콜백 함수가 외부 클릭 감지 시 실행됩니다.

Hook

import { useEffect } from "react";
import type { RefObject } from "react";

/**
 *
 * useOutSideClick 훅은 특정 Ref 객체를 사용하여 외부 클릭을 감지하고, 외부 클릭이 감지되면 지정된 콜백 함수를 호출한다.
 * @param {RefObject<HTMLElement>} ref - 외부 클릭을 감지할 대상 요소의 Ref 객체
 * @param {()=>void} callback - 외부 클릭이 감지되었을 때, 호출될 콜백 함수
 */
export default function useOutSideClick(ref: RefObject<HTMLElement>, callback: () => void) {
  useEffect(() => {
    /**
     *
     * handleClick 함수는 mousedown 이벤트를 처리하며, 만약 ref가 유효하고 클릭된 요소가 ref의 자식이 아니라면
     * 지정된 콜백 함수를 호출한다.
     * @param {MouseEvent} event - mousedown 이벤트 객체
     */
    const handleClick = (event: MouseEvent) => {
      if (ref.current && !ref.current.contains(event.target as Node)) {
        callback?.();
      }
    };
    // mousedown 이벤트에 대한 이벤트 리스너 등록
    window.addEventListener("mousedown", handleClick);

    // 컴포넌트가 언마운트되거나 업데이트될 때 이벤트 리스너를 제거하는 함수 반환
    return () => window.removeEventListener("mousedown", handleClick);
  }, [ref, callback]);
}

1. Import 구문: react 모듈에서 useEffect와 RefObject를 가져옵니다. 이들은 부작용을 관리하고 DOM 요소에 대한 참조 객체를 만드는 데 사용됩니다.

2. 함수 정의: useOutSideClick 함수가 정의되어 있으며, ref (대상 HTML 요소에 대한 RefObject)와 callback (외부 클릭 시 실행될 함수) 두 매개변수를 사용합니다.

3. useEffect 훅: useEffect 훅은 "mousedown" 이벤트에 대한 윈도우 전역 이벤트 리스너를 추가 및 제거하는 데 사용됩니다. 이벤트 리스너인 handleClick은 클릭이 대상 요소 외부에서 발생했는지를 확인하기 위해 ref.current.contains(event.target)를 사용합니다. 클릭이 외부에서 발생한 경우 제공된 callback 함수가 호출됩니다.

4. 이벤트 리스너 등록과 정리: window.addEventListener는 컴포넌트가 마운트될 때 이벤트 리스너를 등록합니다. useEffect 훅 내의 return 문은 컴포넌트가 언마운트되거나 ref 또는 callback이 변경될 때 이벤트 리스너를 제거하는 정리 함수를 포함합니다.