2.2.3 태그 속성은 카멜 케이스로 작성하기

JSX는 자바스크립트 문법과 함께 동작하므로 HTML처럼 속성명을 모두 소문자로 작성하면 오류가 발생할 수 있습니다. JSX에서는 속성명을 자바스크립트 변수명처럼 카멜 케이스로 작성해야 합니다.

TIP   카멜 케이스(camelCase)란 여러 단어로 이루어진 이름을 붙일 때, 첫 번째 단어는 첫 글자를 소문자, 두 번째 단어부터는 첫 글자를 대문자로 표기하는 방식입니다. 예를 들어, userInfo, tabIndex, autoPlay, className처럼 작성합니다.

이때 몇 가지 속성이 자바스크립트 예약어와 충돌할 수 있습니다. 이런 경우 다른 이름으로 대체해야 합니다. 가장 대표적인 예가 class입니다. class는 자바스크립트에서 클래스를 선언할 때 사용하는 예약어이므로 JSX에서는 그 대신 className을 사용합니다.

HTML

<div class="box"></div>

JSX

<div className="box"></div>

다음은 HTML과 JSX에서 서로 이름이 다른 속성들을 비교한 표입니다.