JSX 문법에서 class 대신 className을, for 대신 htmlFor를 쓰는 이유는 무엇인가요?

JSX에서 class 대신 className을, for 대신 htmlFor를 사용하는 이유는 JSX가 결국 자바스크립트 문법을 확장한 것이기 때문입니다.

class는 자바스크립트의 예약어이기 때문에, JSX에서 HTML의 class 속성을 그대로 사용하면 자바스크립트 문법과 충돌이 발생합니다. 이를 방지하기 위해 React는 className이라는 다른 이름을 사용하도록 했습니다.

마찬가지로 for도 자바스크립트에서 반복문 등에 사용되는 예약어입니다. 따라서 HTML의 for 속성을 JSX에서 사용하려면 htmlFor라는 이름을 사용해야 합니다.

이러한 규칙 덕분에 JSX는 자바스크립트 코드 안에서 HTML과 유사한 구조를 안전하게 사용할 수 있게 됩니다.