[NextJS / React] 요소 외부 클릭 감지하기 - useRef

모달이나 드롭다운은 외부 요소를 클릭했을 때 닫히도록 구현하면 사용자 경험을 향상할 수 있다.

리액트의 useRef 훅을 활용하여 이를 구현하기 위한 방법에 대해 알아보자!

useRef ?

• React에서 사용되는 Hook 중 하나로, 함수형 컴포넌트 내에서 DOM 요소 또는 다른 값들을 참조할 때 사용
• 주로 다음과 같은 상황에서 활용
  1. DOM 요소에 접근하기: useRef를 사용하여 함수형 컴포넌트 내에서 생성된 DOM 요소에 접근할 수 있다.
  2. 이전 값 저장하기: 컴포넌트의 렌더링 간에 이전 값에 접근하거나 저장할 수 있다.
  3. 렌더링과 상관없는 데이터 저장하기: useRef는 렌더링과 무관하게 데이터를 저장할 때 유용
• 특징
  • 컴포넌트의 상태가 변경되어도 useRef는 리렌더링되지 않는다.
  • useRef의 current 속성을 사용하여 값에 접근할 수 있다.
  • 초기값으로 useRef(initialValue)를 사용할 수 있다.
  • useRef로 생성한 객체는 컴포넌트의 라이프사이클과 관련이 없으므로, useEffect의 의존성 배열에 포함시키지 않아도 된다.

useOutsideClick 커스텀 훅 작성

• 특정 요소 외부를 클릭했을 때 콜백 함수를 실행하도록 하는 커스텀 훅 작성
• 입력으로 콜백 함수(callback)를 받고, useRef 훅을 사용하여 요소의 참조를 생성
  • 이 참조는 특정 DOM 요소를 가리키게 된다.
• useEffect를 사용한 이벤트 리스너 등록
  • 컴포넌트가 마운트되거나 업데이트될 때 클릭 이벤트 리스너를 등록
  • 이 클릭 이벤트 리스너는 document 전체에서 발생한 클릭 이벤트를 감지

import { useRef, useEffect } from "react";

export const useOutsideClick = (callback: () => void) => {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClick = (event: MouseEvent) => {
      callback();
    };

    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  }, [callback, ref]);

  return ref;
};

useOutsideClick 커스텀 훅 사용

1. 컴포넌트에서 커스텀 훅 호출

const modalRef = useOutsideClick(() => {
  // 외부 클릭 시 실행할 동작 (예: 모달 닫기)
  closeModal();
});

2. ref를 요소에 연결

반환된 modalRef를 JSX 요소의 ref 속성에 할당하여 외부 클릭 이벤트를 감지할 대상 요소를 지정

return (
  <div ref={modalRef} className="modal">
    {/* 모달 내용 */}
    <p>This is a modal!</p>
  </div>
);

이제 modalRef가 가리키는 요소 외부를 클릭하면 callback으로 전달된 함수가 실행되어 원하는 동작을 수행할 수 있다.

References

[OutsideClick] outside click 구현 #1
React Hook: Detect Click outside of Component