이전 장에서 살펴본 것처럼 React가 표준 HTML 요소(<h>, <p>, <div>, <a> 등)를 렌더링할 때, HTML 명세에 존재하는 속성만 렌더링하고, 표준 속성이 아닌 이외의 속성은 제외한다는 점을 기억하고 있을 것이다. 이것은 JSX의 특성이 아니라 React의 동작 방식이다.

그러나 때로는 사용자 지정 데이터를 속성으로 추가해야 할 수도 있다. 목록 데이터가 있다고 가정해보자. 데이터 중에 앱에는 필수적이지만 사용자에게는 필요하지 않은 것도 있다. 이런 정보를 DOM 요소에 속성으로 넣는 것은 흔히 사용하는 방식이다. 다음 예제 코드는 react-is-awesome과 id 속성을 사용하고 있다.

<li react-is-awesome="true" id="320">React is awesome!</li>

 

DOM의 HTML 비표준 속성에 데이터를 저장하는 것은 일반적으로 안티패턴으로 여겨진다. DOM을 데이터베이스나 프론트엔드 데이터 저장소로 사용하는 것이 적절하지 않기 때문이다. DOM에서 데이터를 가져오는 것은 메모리 상의 가상 저장소에서 데이터를 가져오는 것보다 느리다.

JSX를 사용할 때 데이터를 반드시 HTML 요소의 속성으로 저장해야 하는 경우에는 data-* 속성을 사용한다. 예를 들어 속성에서 <li> 요소에 this.reactIsAwesome 값을 렌더링하려면 다음과 같이 작성할 수 있다.

<li data-react-is-awesome={this.reactIsAwesome}>React is awesome!</li>

 

this.reactIsAwesome의 값이 true라면 HTML 렌더링 결과는 다음과 같다.

<li data-react-is-awesome="true">React is awesome!</li>