React - TSX에 Custom Attribute 설정 방법 (type '{ }' is not assignable to type {})

문제사항

기존 HTML 및 Vanila JavaScript

• DOM은 Document Object Model 의 약자로 Object의 일종이다.
• 따라서 자체적으로 예약되어 있는 attribute 외에도 추가적으로 자기가 원하는 custom attribute를 직접 설정해도 된다.

<div value="2" data-value=3> 
	Custom Div 
</div>

• 보통은 위와 같이 data-* 또는 aria-의 format을 따르나, 기존에 존재하는 내장 attribute 도 사용할 수 있다.
  즉, <input> 등의 태그에만 존재하는 value 라는 attribute를
  <div>에도 적용할 수 있다는 말이다.
• 이러한 DOM에 부여된 attribute들을 JavaScript에서 조작하는 method는 4가지가 있다.

element.hasAttribute('foo'); // attribute를 가지고 있는지 확인하는 method
element.getAttribute('foo'); // 해당 attribute를 가져온다. (없으면 null값 반환)
element.setAttribute('foo', value); //  'foo'라는 attribute에 value를 등록
element.removeAttribute('foo'); // 해당 attribute를 삭제

React (TSX)

• TSX에서는 해당 TSX가 자체적으로 가지고 있는 내장 attribute를 제외한 어떠한 다른 내장 attribute를 사용할 수 없다.
• 즉 위에서 말한 <div> 태그에 value attribute를 설정하는 것은 불가능

  강제로 설정하면 아래와 같은 오류 메세지가 뜬다.

Type '{ value: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.
  Property 'value' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.

해결방법

data-* 이나 aria-*의 format을 따르기

• 간단하다. 공식사이트에서 추천하는 방식 그대로 data-* 이나 aria-* 의 name format을 이용해서 custom value를 작성해주면 된다.

  <span data-value={`${MineSweeperData[ypos][xpos]}`} />

참고사이트

• MDN (데이터 속성 사용하기)
• React 공식 사이트(DOM에 Attribute 붙이기)