HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🗂️
React, Hook 들어오네!?/
😊
회의록/
📚
훅 라이브러리/
useClickAway

useClickAway

 
useClickAway Hook은 특정 UI의 외부를 클릭했을 때 함수를 실행할 수 있게 해주는 Hook입니다. 예를들어 모달창이 활성화가 되어있는 상태에서 닫기버튼이 아닌 외부를 클릭하여 모달창을 닫고싶은 경우가 있을 수 있습니다. 이러한 경우 useClickAway 를 사용하면 이를 보다 쉽게 구현할 수 있는데 예제를 통해 useClickAway 의 기본구조와 사용법에 대해 알아보고 모달창을 닫는 기능을 구현해보도록 하겠습니다.
 
 
useClickAway의 기본형태는 위와 같으며 아래의 예제를 통해 자세한 용법에 대해 알아보겠습니다.
 
App.jsx
 
notion image
 
예제는 위의 이미지와 같이 분홍박스 바깥부분을 클릭하면 콘솔창에 메시지가 출력 되고 분홍박스를 클릭하면 아무일도 일어나지 않는 간단한 예제입니다. 이를통해 알 수 있는 것은 useClickAway의 첫 번째 인자에는 외부영역 이외의 요소를 가리키며 두 번째 인자에는 ref의 외부요소가 클릭되었을 때 실행 될 함수를 가리킵니다. 그리고 세 번째 인자에는 원하는 이벤트 종류를 넣게되는데 세 번째 인자를 생략할 경우 기본적으로 ‘click’ 이벤트시 트리거되도록 설정이 됩니다.
 
 
또한 위의 예제처럼 두 번째 인자에서 바로 함수를 선언하여 사용할 수도 있습니다.지금까지useClickAway의 기본형태에 대해 알아보았으니 이어지는 예제에서 모달창을 닫는 기능을 구현해보도록 하겠습니다.
 
App.jsx
 
notion image
notion image
 
예제와 같이 코드를 작성하면 위와 같이 모달창을 띄울 수 있는 버튼이 생성됩니다. 버튼을 누르게되면 모달창이 활성화가 되며 “예”를 누르면 모달창이 닫히게 됩니다. 현재의 상태에서는 모달창의 외부를 클릭하여도 모달창은 그대로 남아있는 것을 알 수 있는데 이는 사용자 편의성을 고려해보았을 때 약간은 불편하다고 생각이 들수도 있습니다. 따라서 모달창의 외부를 클릭하였을때에도 모달창이 닫힐 수 있게 useClickAway 를 활용하여 코드를 개선해보겠습니다.
 
App.jsx
 
앞선 예제를 위와같이 변경해주면 모달창의 외부를 클릭하여도 모달창이 닫히는 것을 확인할 수 있습니다.
 
이처럼 useClickAway 를 활용하면 특정 UI의 외부요소가 클릭되었을 때 콜백 함수를 실행시킬 수 있으며 클릭 뿐만아니라 다양한 event를 적용할 수도 있습니다.
useClickAway(ref, fn, ['click']);
import { useClickAway } from "react-use";
import { useRef } from "react";

const App = () => {
  
  const foo = () => {
    console.log("ref의 외부가 클릭되었습니다.");
  };

  const ref = useRef(null);

  useClickAway(ref, foo, ['click']);

  return (
    <div
      ref={ref}
      style={{
        width: 100,
        height: 100,
        background: "pink",
      }}
    />
  );
};

export default App;
useClickAway(ref, () => {
    console.log("ref의 외부요소가 클릭되었습니다.");
  });
import { useState } from "react";

const App = () => {
  const [onModal, setOnModal] = useState("none");

  const Modal = () => {
    onModal ? setOnModal(false) : setOnModal("none");
  };

  return (
    <>
      <button
        style={{
          margin: 20,
        }}
        onClick={Modal}
      >
        모달창을 띄워주세요!
      </button>

      <div
        style={{
          display: onModal,
          position: "absolute",
          top: 10,
          background: "pink",
          width: 200,
        }}
      >
        <p
          style={{
            textAlign: "center",
          }}
        >
          모달창을 닫겠습니까?
        </p>
        <button onClick={Modal} style={{ width: 200 }}>
          예
        </button>
      </div>
    </>
  );
};

export default App;
import { useClickAway } from "react-use";
import { useRef } from "react";
import { useState } from "react";

const App = () => {
  const ref = useRef(null);
  useClickAway(ref, () => {
    if (onModal === "none") {
      return;
    }
    setOnModal("none");
  });

  const [onModal, setOnModal] = useState("none");

  const Modal = () => {
    onModal ? setOnModal(false) : setOnModal("none");
  };

  return (
    <>
      <button style={{ margin: 20 }} onClick={Modal}>
        모달창을 띄워주세요!
      </button>

      <div
        ref={ref}
        style={{
          display: onModal,
          position: "absolute",
          top: 10,
          background: "pink",
          width: 200,
        }}
      >
        <p
          style={{
            textAlign: "center",
          }}
        >
          모달창을 닫겠습니까?
        </p>
        <button onClick={Modal} style={{ width: 200 }}>
          예
        </button>
      </div>
    </>
  );
};

export default App;