mousedown와 click의 차이: 버블링

mousedown 이벤트는 버블링을 지원하지 않아, 상위 요소에서 공통 컴포넌트를 사용 시 클릭 이벤트를 감지할 수 없기 때문에, 버블링을 지원하는 click 이벤트를 사용합니다.

 

(e.g. mousedown 사용 시, 카드 컴포넌트 내에서 ActionButton 컴포넌트를 자식 요소로 사용하는 경우에 카드 컴포넌트가 ActionButton 외부더라도 버블링이 되지 않기 때문에 부모 요소가 div 외부더라도 클릭 시 버튼 div가 닫히지 않는다.)

ActionButton.tsx 

  useEffect(() => {
    document.addEventListener('click', handleClickOutside);
    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, []);