<aside> 💡 리액트에서 스타일링할 수 있는 여러 방법중 CSS-Module에 대해 정리해보려 한다.

</aside>

React에서 스타일링 하는 방법은 크게 3가지가 있다.

  1. 기존의 CSS방식대로 CSS파일을 통해 하는 방법.
  2. Styled Component를 이용하는 방법.
  3. CSS-Module을 이용하는 방법. 오늘은 나와 가장 친하지 않은 CSS-Module을 이용하는 방법에 대해 정리하려 한다.

1. How do we use it???

  1. 적용하고자 하는 js파일(Test.js)의 디렉토리에 test.module.css라는 파일을 만든다.
  2. js파일에서 import한다. import name__you__want(ex.classes) from 'Test.module.css./'
  3. Css파일에 자신이 적용하고 싶은 스타일들을 작성한다. 이때, Class형식으로 선언하여 작성한다.
  4. 자신이 작성한 스타일을 적용하고 싶은 태그에 className={classes.css__classname}

아래는 위의 과정으로 작성한 코드이다.

Untitled

Untitled

2. What's the benefit???

왜 CSS-Module을 쓰는 것이고, 언제 써야 하는 걸까???

CSS모듈을 사용하게 되면, 고유한 클래스네임을 생성해 준다. 예를 들어, 위의 사진에서 <div>에 나는 classes.backdrop이라는 className을 주었지만, 실제로는

Untitled