refactor: 미션7 useOutsideClick 분리하기

Author: 626-ju

src/components/KebabMenu.jsx

@@ -1,5 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import kebabIcon from '@assets/icon/ic_kebab.png';
+import useOutsideClick from '../hooks/useOutsideClick';
 import styles from '../styles/KebabMenu.module.css';
 
 function makeHtmlAttr(selector) {
@@ -24,28 +25,22 @@ function KebabMenu({ dropdownList, onSelect = () => {} }) {
     setIsOpen(false);
   }
 
-  useEffect(() => {
-    function closeDropDown(e) {
-      if (!kebabRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    }
-
-    window.addEventListener('click', closeDropDown);
+  function onCloseDropdown() {
+    setIsOpen(false);
+  }
 
-    return () => window.removeEventListener('click', closeDropDown);
-  }, []);
+  useOutsideClick(kebabRef, onCloseDropdown);
 
   return (
-    <div className={styles.kebab}>
-      <button ref={kebabRef} onClick={handleToggleDropDown}>
+    <div className={styles.kebab} ref={kebabRef}>
+      <button onClick={handleToggleDropDown}>
         <img src={kebabIcon} alt="케밥 아이콘" />
       </button>
       {isOpen && (
         <ul role="listbox">
           {dropdownList?.map((selector) => (
             <li
-              key={`${selector}`}
+              key={selector}
               {...makeHtmlAttr(selector)}
               onClick={() => handleClick(selector)}
             >

src/hooks/useOutsideClick.js

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+function useOutsideClick(ref, onCloseDropdown) {
+  useEffect(() => {
+    function closeDropdownHandler(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onCloseDropdown();
+      }
+    }
+
+    window.addEventListener('click', closeDropdownHandler);
+
+    return () => window.removeEventListener('click', closeDropdownHandler);
+  }, [ref, onCloseDropdown]);
+}
+
+export default useOutsideClick;