[typescript] event의 type

프로젝트 리팩토링하면서 사용했던 event 관련 타입을 정리해보겠다.

1. React.ChangeEvent

onChange event

React.ChangeEvent<HTMLSelectElement>
React.ChangeEvent<HTMLTextAreaElement>

2. React.MouseEvent

onClick event

React.MouseEvent<HTMLButtonElement>

3. React.MouseEventHandler

4. useRef와 MouseEvent

useRef를 이용해 영역 밖을 클릭하는 경우 메뉴가 닫히는 기능을 구현했다.
ref에 div 컴포넌트를 주고 HTMLDivElement 타입으로 지정했다.
onClick 이벤트니 e에 mouseEvent를 주었다.
그런데 e.target에서 target이 없다고 에러메세지가 나타났다.
구글링해보니 타입 어설션을 쓰라는 해결방법뿐인 것 같다.
일단 as Node를 주어 해결했다.

  const ref = useRef<HTMLDivElement>();
  const clickOut = (e: MouseEvent) => {
    if (isOpen && ref.current && !ref.current.contains(e.target as Node)) {
      setIsOpen(false);
    }
  };
  <DivComponent ref={ref} />