그렇지만 앞서 2.3절에서 다룬 것처럼 표준 HTML 요소에 비표준 HTML 속성을 전달하면 해당 HTML 속성이 렌더링되지 않는다. 예를 들어 다음 두 코드를 살펴보자.

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

<li reactIsAwesome={this.reactIsAwesome}>React is orange</li>

 

두 경우 모두 결과는 다음과 같다.⁴

<li>React is orange</li>

 

확실히, 사용자 지정 컴포넌트 클래스에는 내장 렌더러가 없고, 표준 HTML 요소나 다른 사용자 지정 엘리먼트에 의존하므로 데이터를 다루기 위해 data-* 속성을 사용할 필요는 없다. this.props를 통해서 입력한 모든 속성에 접근할 수 있기 때문이다.

2.3절에서 살펴본 자바스크립트 HelloWorld 컴포넌트를 다시 한 번 살펴보자.

class HelloWorld extends React.Component {
  render() {
      return React.createElement(
          'h1',
          this.props,
          'Hello ' + this.props.frameworkName + ' world!!!'
      )
  }
}