타입스크립트를 적용해 프로젝트를 생성하고 개발을 하니
타입스크립트 적용 하기 전에는 문제 없던 곳에서 에러가 발생했다.
바로
<span
name="shipping-fee"
className={tabState === "shipping-fee" ? "shipping-fee-current" : "shipping-fee"}>
배송비 템플릿
</span>위 코드에서 span 태그에 빨간 줄이 그어진다.
에러의 내용은
Type '{ children: string; name: string; className: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.
Property 'name' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.위와 같다.
해석해 보면 위에 나오는 태그에 할당할 수 없다는 것!
타입스크립트를 사용하기 때문에 span 태그의 타입에는 저 속성이 없어서 사용할 수 없는것으로 확인이 된다.
해결은
<span
data-name="shipping-fee"
className={tabState === "shipping-fee" ? "shipping-fee-current" : "shipping-fee"}>
배송비 템플릿
</span>name 앞에 data-를 붙여 해결했다.
꼭 span 태그가 아니더라도 기존 html 태그에 사용하던 속성들을 쓸 때 태그에 빨간 줄이 그어지는데
이때는 data- 접두사를 붙여 해결해야겠다.