[React.js] 리액트(React)에서 HTML 요소의 클래스를 지정할 때 class가 아닌 className을 사용하는 이유?

리액트(React)에서 HTML 요소의 클래스를 지정할 때 class가 아닌 className을 사용하는 이유?

들어가며

• 리액트(React)에서 HTML 요소의 클래스를 지정할 때 class가 아닌 className을 지정하는 이유를 알아보자.

 

이유

• 리액트(React)에서 HTML 요소의 클래스를 지정할 때, 다음과 같이 class가 아닌 className을 지정한다.
• 그 이유는 자바스크립트(JavaScript)와의 충돌을 피하기 위해서이다.
• 리액트는 자바스크립트와 JSX를 사용하여 UI를 작성한다.
  • JSX는 자바스크립트의 확장 문법이다.
  • JSX는 HTML과 유사하게 보이지만, 자바스크립트의 일부이다.
• 자바스크립트에는 class라는 키워드(Keyword)가 있기 때문에 리액트에서 HTML 요소에 클래스를 지정할 때 class를 사용하면 자바스크립트의 class와 혼동이 생길 수 있다.
• 따라서 리액트에서는 HTML의 class 속성을 className으로 대신 사용하여 이러한 충돌을 피한다.
• JSX에서는 className을 사용하여 HTML 요소의 클래스를 지정하고, 리액트는 이를 내부적으로 올바른 HTML의 class 속성으로 변환하여 렌더링한다.
• 따라서 className을 사용함으로써 리액트와 자바스크립트의 class 키워드 간의 충돌을 방지하고, JSX에서 HTML과 유사한 문법을 사용할 수 있게 된다.

 

사용 예

• 리액트에서의 사용법은 다음과 같다.

			
			
			
		
import React from 'react';
 
function MyComponent() {
  return <div className="my-class">Hello, World!</div>;
}
 
export default MyComponent;

 

 

• 브라우저에서는 다음과 같이 랜더링된다.

			
			
			
		
<div class="my-class">Hello, World!</div>

 

비슷한 사례

• class 뿐만 아니라 리액트나 다른 라이브러리에서 HTML과의 충돌을 피하기 위해 일부 속성이나 방식들이 조정되거나 이름이 변경되는 경우가 있다.

 

① for → htmlFor

• <label> 태그에서는 for 속성을 사용하여 레이블과 연결된 input 요소의 id를 지정한다.
• 그러나 자바스크립트에서 for는 반복문과 연관된 키워드로 사용된다.
• 따라서 리액트에서는 HTML의 for 속성 대신 htmlFor로 사용한다.

			
			
			
		
<label htmlFor="inputField">Name:</label>
<input id="inputField" type="text" />

 

② style

• HTML에서는 직접 CSS 스타일을 지정할 때 문자열로 스타일을 설정할 수 있다.
• 하지만 리액트에서는 스타일을 객체(Object)로 표현한다.

			
			
			
		
const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgrey',
};
 
function MyComponent() {
  return <div style={divStyle}>Hello, World!</div>;
}

 

③ wdangerouslySetInnerHTML

• 일부 상황에서 HTML을 동적으로 렌더링해야 할 때 사용한다.
• 그러나 이름에서 알 수 있듯이, 이 속성은 '위험한' 용도로 쓰이기 때문에 이름에 주의를 기울이고 사용에 주의해야 한다.

			
			
			
		
function MyComponent() {
  const htmlString = '<span>This is a span element</span>';
  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}