아래와 같이, "파일명.module.css"을 붙이면 해당 css 파일은 모듈화된다.
App.module.css
서로 다른 css module 파일은 혹여나 className이 중복되더라도 각각의 스타일을 적용할 수 있다. 클래스 이름을 랜덤한 고유값으로 자동으로 만들어주어 브라우저에서 렌더링할때 자동으로 className을 고유값으로 부여하기 때문이다. 따라서 독립된 스타일로서 관리할 수 있어 유지 보수에 용이하기에 컴포넌트 단위로 스타일을 적용할때 유용하다.
import styles from './App.module.css';
function App() {
return (
<h1 className={styles.container}>Hello!</h1>
)
};
export default App;