3.4.2 data- 속성

2.3절에서 JSX를 사용하지 않고 속성을 다루는 방법에 대해 살펴보기는 했지만, HTML에 사용자 정의 속성을 생성하는 방법에 대해 한 번 더 살펴보자. 이번에는 JSX를 사용할 것이다. React는 주로 HTML 비표준 속성을 컴포넌트에 추가하면 신경도 쓰지 않고 무시한다. 이 점은 JSX가 아닌 네이티브 자바스크립트로 작성해도 소용이 없다. React의 동작 원리이기 때문이다.

그렇지만 가끔 DOM 노드에 추가 데이터를 전달해야 하는 경우가 있다. 이것은 안티패턴으로, DOM을 데이터베이스나 로컬 스토리지처럼 사용하지 않아야 한다. 그럼에도 불구하고 사용자 정의 속성을 렌더링해야 한다면 속성의 접두사로 data-를 사용한다.

예를 들어 다음은 정상적인 사용자 정의 속성인 data-object-id를 사용했으므로 React가 뷰에 렌더링할 것이다(HTML은 이 JSX와 같다).

<li data-object-id="097F4E4F">...</li>

 

만약 다음과 같은 React/JSX 엘리먼트를 입력하면 React는 object-id를 렌더링하지 않는다. HTML 표준 속성이 아니기 때문이다(렌더링 결과의 HTML에는 JSX와 달리 object-id가 출력되지 않는다).¹³

<li object-id="097F4E4F">...</li>