[React] useOnClickOutside에서 왜 mousedown 이벤트를 사용했을까?

▶ 리액트에서 유용한 커스텀 훅인 useOnClickOutside가 있다.
▶ 아래 화면중에서 쿵푸팬더 화면은 모달창이고 그 외의 부분을 클릭했을 때 닫히는 커스텀 훅이다.

▶ 코드는 아래와 같다

import React from 'react';
import { useEffect } from 'react';
const UseOnClickOutside = (ref,handler) => {
  useEffect(() => {
    const listener = (event)=>{
      if(ref.current.contains(event.target)){
        return
      } else{
        handler();
      }
    };
    document.addEventListener('mousedown',listener)
    return () => {
      document.removeEventListener('mousedown',listener)
    };
  }, [ref,handler]);
}

export default UseOnClickOutside;

▶ 위의 코드를 보면 addeventlistener에서 자주쓰는 click이 아니라 mousedown을 쓰고 있다.

▶ 만약 해당부분을 click으로 바꾸게 되면 모달창을 띄우려고 해도 뜨지 않는다.

▶ 이유는 '이벤트 버블링'현상 때문이다. 창을 열려는 click과 커스텀훅의 click이 순간적으로 작동하여 열리고 닫힌다. 그래서 아무 것도 안 일어나는 것처럼 보인다.

▶ 이를 회피하기 위해서 'mousedown'을 사용하며, addEventListener에 3번째 인자를 넣어서도 해결 가능하다

document.addEventListener('click', listener, true)

※ 출처 : https://velog.io/@imconfi11/%EC%99%9C-useOnClickOutside%EC%97%90%EC%84%9C-mousedown-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%96%88%EC%9D%84%EA%B9%8C