[React] CSS Module

• 아래와 같이, "파일명.module.css"을 붙이면 해당 css 파일은 모듈화된다.

  App.module.css

• 서로 다른 css module 파일은 혹여나 className이 중복되더라도 각각의 스타일을 적용할 수 있다. 클래스 이름을 랜덤한 고유값으로 자동으로 만들어주어 브라우저에서 렌더링할때 자동으로 className을 고유값으로 부여하기 때문이다. 따라서 독립된 스타일로서 관리할 수 있어 유지 보수에 용이하기에 컴포넌트 단위로 스타일을 적용할때 유용하다.

• 적용법: 클래스를 적용시킬 파일에서 import해서 호출하고 클래스 명을 다음과 같이 코딩.

import styles from './App.module.css';

function App() {
  return (
    <h1 className={styles.container}>Hello!</h1>
  )
};

export default App;