React-TS : e.target의 태그를 가져오고 싶다면

이벤트 위임을 하기 위해서 함수 하나를 만들어 클릭한 요소의 태그를 가져오고 싶은 상황이였다.

  const test = (e:MouseEvent<HTMLDivElement>)=>{
      const el= e.target
      console.log(el.tagName)
  }

위의 식대로 썼지만,

EventTarget에는 tagName이 없다고 친절히 알려줘서 고민하다가 Magic Pos에서 사용한 타입 단언을 사용해주기로 하였다.

  const test = (e:MouseEvent<HTMLDivElement>)=>{
      const el= e.target as Element
      console.log(el.tagName)
  }

태그 네임을 가져오는 것이 되므로 el 의 value 값을 가져와서 이벤트 위임만 하면 끝이다.

  const test = (e:MouseEvent<HTMLDivElement>)=>{
      const el= e.target as Element
      if(el.tagName === 'BUTTON') {
            el.value
      }
  }

그렇지만

Element 타입에는 value 가 없다고 한다.

참고로 tagName의 동등기호 연산자를 사용하려면 태그이름을 대문자로 써야한다.

물론 e.target의 단언을 Element가 아닌 as HTMLInputElement 등으로 하면 당연히 value 값을 찾을 수야 있겠지만,

클릭이벤트를 하는 컴포넌트안에는 div , p , button, input 등이 있어서 타입 단언이 불가한 상태이다.

 if(typeof el === HTMLInputElement) { ... }

위에서 처럼 되면 얼마나 좋겠냐만은... 왼쪽은 string이고 HTMLInputElement는 타입이고

비교 자체가 안된다.

여러 블로그 글을 찾아보거나 해도, 쳇바퀴 돌듯이 죄다 나에게는 필요없는 이야기이고

구글 창에 javascript event target property 이렇게 검색해도 event.target.textContent 와같은 useCase들만 보인다.

그래서 먼저 typeof e.target 을 콘솔창 확인을 해봤다.

  const test = (e:MouseEvent<HTMLDivElement>)=>{
	console.log(typeof e.target) // object
  }

object란다.

먼가 실마리를 찾기 멀어보였다.

그러다가 내가 블로그에 정리해놓았던 HTML변경과 조작 & 연산자 ! 여기서 힌트를 얻음..

(지금 생각해보면 object자체가 실마리였다.)

// 내가 써놓은 HTML변경과 조작 & 연산자 !에 써놓았던 글중.. 발췌
var red = 'red' as const // 값이자 타입

// narrowing
var div   = document.querySelector(".div") ;
// Element가 아닌 HTMLElement로 || HTMLDivElement로 
if(div instanceof HTMLElement) { 
      div.style.color = red
}

// assertion
var div  =document.querySelector(".div") as HTMLElement
div.style.color = red

instance of 연산자

instance of

instance of 연산자란 객체가 어떤 클래스인지, 어떤 클래스를 상속받았는지 확인하는데 사용하는 연산자 이다.즉,
참조변수가 참조하고 있는 인스턴스의 실제 타입을 알아보기 위해 해당 연산자를 사용한다.

위의 연산자를 사용하면 깔끔하게 해결할 수 있다.

  const test = (e:MouseEvent<HTMLDivElement>)=>{
      if(e.target instanceof HTMLInputElement) {
            e.target.value
      }
  }

타입추론하고 에러가 없이 말끔히 해결가능!!