HTML class와 React className 차이점과 사용법

 

웹 개발 환경이 변화함에 따라 HTML 요소를 스타일링하는 방법도 다양해졌다. 
단순히 정적인 HTML에서 클래스를 부여하던 방식부터, 
React와 같은 프레임워크에서 스타일 충돌을 방지하고 동적인 처리를 위해 사용하는 라이브러리 방식까지, 
각 환경에 맞는 class 문법을 정리해 보았다.

1. HTML + CSS

<div class="abc">contents</div>

.abc {
	color: red;
}
.abc:hover {
	color: blue;
}

 

2. HTML + SCSS

<div class="abc">contents</div>

.abc {
	color: red;
	&:hover {
		color: blue;
	}
}

 

3. React + SCSS

React(JSX) 환경에서는 자바스크립트 예약어와의 충돌을 피하기 위해 class 대신 className이라는 명칭을 사용한다.

import './Component.scss';

<div className="abc">contents</div>

/* Component.scss */
.abc {
  color: red;
  
  &:hover {
    color: blue;
  }
}

 

4. React + Module.scss

CSS 클래스명이 전역에서 중복되는 문제를 방지하기 위해 스타일을 객체(Object) 형태로 불러와 적용한다.
대규모 프로젝트에서 스타일 충돌을 막는 가장 대중적인 방법이다.

import classNames from 'classnames';
import styles from './Component.module.scss';

<div className={classNames(styles['abc'], styles['etc'])}>contents</div>

/* Component.module.scss */
.abc {
  color: red;
  
  &:hover {
    color: blue;
  }
  
  &.etc {
    color: green;
  }
}