TimePicker 외부 클릭 시 다시 열리는 현상

🚨  TroubleShotting

문제 발생의 배경 - As Is

투표 시간을 설정하는 타이머에서 Input을 클릭하면 해당 시간 선택창(TimePicker)이 열리도록 하고,
열려 있는 상태에서 외부를 클릭하면 TimePicker가 닫히도록 구현하고 있었다.
이 과정에서 두 가지 큰 이슈를 겪었다:

---

❗️ 문제

[true, false] 상태에서 Input을 클릭하면 handleClickOutside가 실행되어 [false, false]로 닫혔다가,
곧이어 다시 [true, false]로 다시 열리는 현상이 발생함.

# 1) 이 상태에서 [false, false]로 상태를 변경하고자 함
timeOpen => [true, false]

# 2) 그런데 [false, false]가 되자마자 곧바로 다시 [true, false]가 됨
timeOpen => [false, false]
timeOpen => [true, false]

// 당시 코드
useEffect(() => {
    if (timeRef && timeRef.current) {
      const handleClickOutside = (e: MouseEvent) => {
        if (timeOpen.some((t) => t) && timeRef.current.some((ref) => ref && !ref.contains(e.target as Node))) {
          setTimeOpen(Array(2).fill(false));
        }
      };
      document.addEventListener("mousedown", handleClickOutside);
      return () => {
        document.removeEventListener("mousedown", handleClickOutside);
      };
    }
  }, []);
  
  ... 
  
  <div style={{ display: "flex", alignItems: "center", gap: "5px", position: "relative" }}
   onClick={() => setTimeOpen((prev) => prev.map((p, i) => (i === idx ? true : p)))}
   ref={(el: any) => {timeRef.current[idx] = el;}}
   >

---

2. 원인 분석

✅ 원인 1. useEffect의 의존성 배열이 빈배열로 되어 있어 timeOpen 상태가 클로저에 갇힘

• useEffect의 의존성 배열이 빈배열이면, 내부 함수는 외부의 최신 state를 자동으로 참조하지 않고, 정의 당시의 값을 기억한 클로저에 갇히게 된다.
• 이로 인해 상태는 바뀌었지만 handleClickOutside에서는 여전히 이전의 timeOpen 값을 참조하고 있었음

✅ 원인 2. 이벤트 실행 순서에 대한 이해 부족

1. 사용자가 Input을 클릭
2. onClick → setTimeOpen(idx) 실행 → 🔁 렌더링 예약
3. 동시에 document.mousedown 이벤트 발생 → handleClickOutside 실행됨
4. 그래서 setTimeOpen([false, false]) 실행됨
5. 하지만 이 시점 이후에 원래의 onClick에 의한 상태 변경이 다시 반영됨 → 다시 true로 되돌아감

• onClick은 리액트가 자체적으로 mousedown + mouseup 둘 다 발생한 후 만들어낸 합성 이벤트(synthetic event) 이므로 mousedown이 항상 먼저 일어남

---

2. 해결방안

🔧  방법 1. stopPropagation()

• Input 상단 div에 onMouseDown={(e) => e.stopPropagation()} 추가
• document까지 이벤트가 전파되지 않아 handleClickOutside가 실행되지 않음
• 결과: 닫히지 않음 → 상태 유지됨 ([true, false])

🔧  방법 2. setTimeout(() => ..., 0)

• mousedown 이벤트 핸들러인 handleClickOutside 함수 내부 로직을 한 박자 늦게 실행되도록 defer 처리
• onClick이 먼저 일어나도록 변경해주었어
• 결과: 닫히는 동작 성공 ([false, false])

  useEffect(() => {
    if (timeRef && timeRef.current) {
      const handleClickOutside = (e: MouseEvent) => {
        setTimeout(() => {
          if (timeOpen.some((t) => t) && timeRef.current.some((ref) => ref && !ref.contains(e.target as Node))) {
            setTimeOpen(Array(2).fill(false));
          }
        }, 0);
      };
      document.addEventListener("mousedown", handleClickOutside);
      return () => {
        document.removeEventListener("mousedown", handleClickOutside);
      };
    }
  }, [timeOpen]);

---

💡 새롭게 알게된 점

🧠 클로저 + useEffect

• useEffect(() => {...}, [])는 내부 함수가 최초 렌더링 당시의 상태만 기억함
• 최신 상태를 사용하려면 의존성 배열 또는 useRef로 상태 추적 필요

🔄  DOM 이벤트 전파 순서

1	캡처링	부모 → 자식, document의 addEventListener(..., 3rd인자 true)가 있으면 실행됨
2	타겟	클릭한 요소 자체에서 실행됨 (이벤트 리스너가 있다면)
3	버블링	자식 → 부모, document.addEventListener(..., false) 실행됨 → 여기서 handleClickOutside
4	리액트 합성 이벤트	리액트의 합성 이벤트 , onClick={() => ...} 실행  → 여기서 setTimeOpen true로

• 이벤트 핸들러는 기본적으로는 버블링 단계에서 함수가 실행된다. true를 3rd인자로 넘기지 않는한!

🧩 React 합성 이벤트 (onClick)

• DOM의 mousedown → mouseup 이벤트 흐름이 끝난 뒤 발생
• React 내부에서 추상화된 이벤트 처리 방식이므로 버블링보다 늦게 실행됨

---

🔍선택의 기준

"나는 상태가 변경되어서 timeOpen이 false가 되길 원하는 상황이었지."

따라서 stopPropagation()처럼 이벤트 자체를 차단하는 방식이 아니라,
실행 순서를 바꾸는 setTimeout()이 더 적합한 해결책이었음

---

🚩마무리

이번 이슈는 단순히 "외부 클릭 감지" 기능처럼 보였지만,
그 속에는  클로저와 useEffect의 관계, React의 이벤트 처리 방식, DOM의 이벤트 전파 흐름,
그리고 stopPropagation과 setTimeout의 의도된 타이밍 제어 차이까지 중요한 개념이 숨어 있었다.

이제는 어떤 상황에 stopPropagation()을 써야 하고, 어떤 상황에 setTimeout()이 더 적합한지도 판단할 수 있다.
또한, 외부 클릭 감지 로직을 구현할 때 어떤 시점에 상태가 반영되는지도 더 명확히 이해하게 되었다.