CSS 모듈

CSS 모듈
: 컴포넌트간 CSS 클래스의 중첩을 신경쓰지 않고 className 사용,
- 리엑트에서는 자동으로 지원 ( 웹팩에서 지원 ) 
- 간결한 클래스명을 이용해서 컴포넌트 단위로 스타일을 적용할 때 좋다.

{이름}.module.css

 

/* index.module.css */
#button {
	color: red;
	font-size: 10px;
}

#container {
	margin: 20px;
}

 

import 해서 가져온다.

// app.js
import styles from "./styles.module.css";

function App() {
	return (
		<div id={styles.container}>
			<button className={styles.button}>버튼</button>
		</div>
	);
}

export default App;

 

단점 
: 컴포넌트 작성할 때 한곳에서 모든 것을 작성하지 않고,
따로 CSS 파일을 만들어줘야하고, 많은 CSS 파일을 따로 관리해야하는 문제점이 있다. 

 

 

출처

 

https://velog.io/@kwonh/React-CSS%EB%A5%BC-%EC%9E%91%EC%84%B1%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EB%93%A4-css-module-sass-css-in-js#css-module

[React] CSS를 작성하는 방법들, css-module, sass, css-in-js

https://blog.toycrane.xyz/css%EC%9D%98-%EC%A7%84%ED%99%94-%EA%B3%BC%EC%A0%95-f7c9b4310ff7

CSS의 진화 과정