개요

JSX가 HTML과 완전히 똑같다면 더할 나위 없이 편하겠지만, JSX 컴파일러를 도입하는 과정에서 HTML과 차이가 존재하다.

className의 사용

JS에는 class라는 키워드가 있다. for이라는 키워드도 있고, =, “”는 등등 은 JS에서 특별한 문자들이다.

이러한 문자들을 JS Engine은 특별하게 다루기 때문에 함부로 써서는 안된다.

문제는, JSX에서 쓰는 HTML 문법 중에는 이렇게 JS에서 쓰는 특수문자들이 많이 포함되어 있다는 것이다.

그 중에서 우리가 알아야 할 것은, 다행히 하나밖에 없다. 바로 HTML의 class attribute이다.

JSX 컴파일러에서 className이라는 키워드를 발견하면 class로 바꿔주기 때문에 className을 무조건 사용해야된다.

JSX를

Are there any other HTML attributes that are reserved keywords in JavaScript that I wont be able to use in JSX?

self-closing tag

Vue.js와의 비교