Property 'dataset' does not exist on type 'EventTarget' 에러 해결하기

React + Typescript 프로젝트에서 사이드바의 li 클릭 시 이벤트를 구현하는데 li의 dataset을 사용하는 과정에서 이런 에러가 떴다.

Property 'dataset' does not exist on type 'EventTarget'

해결방법

e.target을 e.currentTarget으로 바꿔주면 된다.

e.target (에러)

e.target은 겹치는 DOM이어도 모두 같은 레벨에 있는 것으로 간주한다. 따라서 같은 li를 클릭해도 클릭하는 바로 그곳의 DOM(li의 하위돔)들을 각각 다 잡는다.

에러를 수정하기 전 브라우저 콘솔에 하위 DOM이 각각 클릭된 내용이 있었는데 캡처를 못했다. name 텍스트 있는 p 태그도 뜨고 li 태그도 뜨고 checkbox div도 잡히고 난리도 아니었음..

  const handleClick = (e: React.MouseEvent<HTMLLIElement>) => {
    console.log(e.target.dataset.index); // -> 여기서 에러 발생
  };

  return (
    <div className={styles.wrapper}>
      <div className={styles.title}>카테고리</div>
      <ul className={styles.list}>
        {CATEGORY.map(({ name, id }) => {
          return (
            <li
              key={id}
              className={styles.listItem}
              onClick={(handleClick)}
              data-index={`${id}`}
            >
              {clickedIndex === id ? (
                <div className={styles.checkedBox}>
                  <Checkbox />
                </div>
              ) : (
                <div className={styles.checkbox}></div>
              )}
              <p>{name}</p>
            </li>

e.currentTarget (해결)

위 코드의 2번째 줄의 target을 currentTarget으로 바꿔주면 간단히 해결된다.

e.currentTarget은 가장 바깥쪽 DOM만 잡는다. 따라서 li 태그를 클릭하면 클릭한 의도대로 li가 잡히며 li의 dataset도 사용 가능해진다.

에러 해결 후 화면

handleClick 이 발생하고 dataset.index이 잘 찍힌 걸 볼 수 있다.