리액트 외부 영역 클릭시 닫기

미친 듯이 삽질했던 외부 영역 클릭 시 닫는 기능을 까먹지 않기 위해... 작성하자.

우선 코드부터 보자

  const [showOption, setShowOption] = useState(false)
  const handleToggleOption = () => setShowOption((prev) => !prev)
  
  const handleClickOutSide = (e) => {
    console.log(ref.current.contains(e.target))
    if (showOption && !ref.current.contains(e.target)) {
      setShowOption(false)
    }
  }

  useEffect(() => {
    if (showOption) document.addEventListener('mousedown', handleClickOutSide)
    return () => {
      document.removeEventListener('mousedown', handleClickOutSide)
    }
  })

드롭다운 메뉴는 showOption이 true일 때 보이게 되는데
초깃값은 false이며 클릭 시 true가 된다.
useEffect로 마우스 클릭 시
( mousedown 이벤트도 상관없다
mousedown : 누르는 순간, click: 떼는 순간 )
handleClickOutSide 함수가 실행되며

showOption이 true이며 !ref.current.contains(e.target)) false 일 때
showOption은 false가 되며 창이 닫히게 된다.

가장 중요한 코드는 이 코드이다.

ref.current.contains(e.target))

삽질의 주요 원인은 ref를 어디에다 두느냐 였다.

contains 메서드는 e.target이 ref의 자식이냐를 알려주는 것인데
ref를 이상하게 두니 모달이 원하는 위치에서 클릭 시 닫히지 않고 엉뚱한 곳에서 닫혔다.

기억하자 ref 위치 중요하다