이벤트 버블링 막기 stopPropagation

window의 클릭 이벤트에 메뉴를 닫는 콜백을 달아놓고

특정 버튼을 클릭 시 메뉴가 열릴 때

이벤트 버블링으로 인해 window에 설정된 이벤트가 같이 발생되어서 메뉴가 열리지 않는 문제가 발생한다

이벤트 버블링을 막아서 해결할 수 있다

const [focusedId, setFocusedId] = useState<string>();

const resetFocusedId = useCallback(() => {
    setFocusedId(undefined);
  }, []);

const _setFocusedId = useCallback((e: React.MouseEvent, id: string) => {
    e.stopPropagation(); // 이벤트 버블링 방지
    setFocusedId(id);
  }, []);

useCallback(() => {
  window.addEventListener("click", resetFocusedId);
  return () => {
    window.removeEventListener("click", resetFocusedId);
  };
}, [resetFocusedId]);