오늘은 리액트 + 타입스크립트 조합으로 개발하면서 마주친 에러에 대해 작성해 보겠습니다! 사실 저번에도 event.target.value를 작성해서 비슷한 에러를 마주치고 검색해서 해결했던거 같은데,,, 해결만 하고 그냥 넘어가니 기억에 남지않았나 봅니다... 그래서 기록을 해보겠습니다!
먼저 제가 작성한 컴포넌트는 위 이미지처럼 여러가지 메뉴의 버튼을 가지고 있고 그 버튼을 선택하면 타입상태를 변경하고 그 상태와 일치하는 버튼 색만 달리하려고 합니다.
문제 발생
그래서 필요한 데이터를 버튼의 data속성을 이용해 담아 두고 클릭했을 때 찍어보려고 시도를 했는데 event.target.dataset.name 에 'EventTarget' 형식에 'dataset'속성이 없다는 에러가 떴습니다.
이것은 event.currentTarget은 이벤트리스너가 등록된 html요소이지만 그냥 target은 이벤트가 실제로 발생한 요소 즉, window나 document 객체를 가리키게 될 수도 있기 때문에 타입스크립트가 dataset속성을 가지고 있다고 확신하지 못해 에러가 발생했습니다.
문제 해결
(1) target 대신 currentTarget 사용
원인을 파악하고 target을 currentTarget으로 바꾸어 주었습니다. 
하지만 dataset.name이 undefined 형식이 될 수도 있기때문에 또 다시 에러가 났고,,
const SavingsButtons = () => {
const savingsTypes = ['전체', '예금', '적금'];
const [type, setType] = useState('전체');
const onClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
const typeName = event.currentTarget.dataset.name;
typeName && setType(typeName);
};
//...
}data-name이 있을때에만 setType을 해주도록 변경하니 문제가 최종적으로 해결되었습니다.
(2) 타입가드를 통해 해결
event.target이 HTML요소의 인스턴스이면서 이벤트타겟 속성에 data-name이 있을 때만 setType을 하도록 타입가드를 설정해 주는 방법도 있습니다!
const onClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
if (event.target instanceof HTMLElement && event.target.dataset.name) {
setType(event.target.dataset.name);
}
};마무리
이제 7개월 과정에서 수업은 모두 끝이났고 남은 2개월 동안 프로젝트 2개를 진행하게 되네요.. 공고를 보면 타입스크립트를 사용하는 곳이 많이 사용한다는 걸 느꼈습니다. 저도 이번 프로젝트는 타입스크립트로 진행하게 되었는데요. 진행하는 동안 많은 오류를 해결하면서 타입스크립트에 대해 많이 배우고 안전한 코드를 작성할 수 있는 개발자로 성장하길 바랍니다 ㅎㅎ
