[react] 마우스 클릭 이벤트 타입 지정하기

마우스 클릭 시 type 지정하여, event 값을 가져오는 데 어려움을 겪는 사람들을 위해 글을 적어보겠다.

 

 

보통 에러가 나는 부분은 event를 가지고와서 핸들링할 때, 주로 발생을 한다. event.target as HTMLElement 를 활용해서 사용하는 방식을 사용하면 된다. 사실 간단히 아래와 같이 구현이 가능하다.

 

type CustomMouseEvent = MouseEvent<HTMLElement>;

const TestComponent = () => {
  const handleSelect = (event: CustomMouseEvent) => {
    const eventTarget = event.target as HTMLElement;
    console.log(eventTarget.innerTest)
  };
  return (
  	<button
      onClick={TestComponent}
    > 
    Click Here! 
    </button>
  )
}

 

위의 예제를 활용해서 응용을 진행해 보자.