class를 안쓰고 className을 쓰는 이유

개요

React를 사용하여 개발을 했던 사람이라면 element 요소 내 className을 사용하는 것을 알 것이다.

본인은 React에서는 class 대신에 className을 사용하는구나 정도로 이해했지만, 문득 "왜 그럴까?" 라는 의문이 생겨 찾아 공부하고 글을 남기려고 한다.

 

JavaScript 예약어 충돌 회피

• 'class'는 자바스크립트에서 예약어로 사용된다.
• 클래스 정의에 사용되며, 이를 속성명으로 사용할 경우 혼란이 발생할 수 있다.
• 따라서, JSX에서는 혼동을 피하기 위해 'class' 대신 'className'을 사용하여 CSS 클래스를 지정한다.

React의 JSX 문법

• JSX는 자바스크립트 코드 안에서 XML을 사용하는 문법으로, XML과 자바스크립트가 혼합된 형태이다.
• JSX는 자바스크립트로 트랜스파일되기 때문에 자바스크립트 예약어를 피하는 것이 중요하다.

예제

HTML에서의 class 사용

<!-- 일반 HTML에서는 class 속성을 사용 -->
<div class="my-class">Hello, World!</div>

 

React(JSX)에서의 className 사용

// React JSX에서는 className 속성을 사용
const MyComponent = () => {
  return <div className="my-class">Hello, World!</div>;
};

export default MyComponent;

 

컴파일 결과

JSX는 컴파일 과정에서 자바스크립트 함수 호출로 변환된다.

// JSX 컴파일 결과
React.createElement('div', { className: 'my-class' }, 'Hello, World!');

 

이처럼 'className'이 속성으로 설정되어, HTML의 'class'와 동일한 역할을 하게 된다.

 

요약

• 'class'는 자바스크립트 예약어이기 때문에, React에서는 혼란을 피하기 위해 'className'을 사용한다.
• 'className'은 JSX 문법에서 CSS 클래스를 지정하는 표준 방식이다.
• 이는 React에서 HTML과 자바스크립트 간의 문법 충돌을 방지하고, 명확하고 일관된 코드를 작성할 수 있게 한다.