3-2. CSS in React

Reactjs에서 CSS를 활용하는 3가지 방법 - 2. css 모듈 이용하기

 

css module을 이용하면 className 을 임의화하여 css가 global이 아닌 local이 되도록 함!

 

1. css 파일을 module.css로 바꿔주기 (CRA를 통해 만든 프로젝트이기때문에 가능)

 

2. css 파일에 className 넣어주기

/* Header.module.css */

.navList { 
	display: flex;
}

.navList:hover {
	background-color: blue;
}

 

 

3. import 방식을 변경해주기 like javascript (꼭 styles라고 할 필요 없음. 사용하려는 변수 넣어주면 됨)

// 기존
import 'Header.css';

//변경
import styles from 'Header.module.css';

 

4. className을 객체처럼 사용하기

// 기존
<ul className="navList">
...
</ul>

// 변경
<ul className={styles.navList}>
...
</ul>

실행결과는 동일하지만, 개발자 도구로 요소를 찾아 className을 확인해보면 "navList"가 아닌 임의값으로 변경된 것을 확인 할 수 있다.

이렇게 되면 navList 라는 className을 다른 컴포넌트에서도 사용할 수 있게 된다!

 

그러나 여전히 javascript 와 css가 분리되어있고, className을 기억해야한다는 단점이 있다.

또한 javascript 문법 상 {} 내에 하이픈을 사용할 수 없기때문에 className은 항상 카멜케이스로 작성되어야한다.

module을 이용하는 방법은 규모가 작은 프로젝트에 더 적합하다.