(PostCSS) PostCSS의 모듈화

PostCss의 가장 큰 장점은 CSS가 모듈화 되는 것이다.

모듈화의 장점은, 일단 css의 코드들이 꼬일 확률이 적어지고, 네이밍을 굳이 하지 않아도 되고 헷갈리지 않게 사용할 수 있다는 것이다.

 

이제부터 모듈화를 어떻게 하는 것인지에 대해 알아보도록 한다.

간단하게 app에 button1, button2을 만든다.

 

button1, button2 동일한 클래스 이름을 이용해서 만들어 준다.

 

 

jsx 파일도 같은 클래스 이름을 이용해서 만들어준다.

 

그냥 이렇게만 할 때에는,

이렇게 덮어쓰기가 되는 것을 알 수 있다. 같은 클래스 이름을 사용하면, 마지막 button2에 있는게 뒤늦게 실행이 되므로 button1의 style은 적용이 되지 않고 덮어써진다.

그래서 그것을 방지하기 위해 이렇게 button2__button 이라던지, 이렇게 번거롭게 (또 기억하기 힘들게) 작성을 했어야 했다.

 

우리는 이것의 번거로움 때문에 css를 모듈화해서 사용해보겠다.

 

postCSS를 모듈화 하는 방법

 

css 파일은 button과 text로 클래스 이름을 생성한다. 

 

1. css파일에 module을 붙인다.

이렇게 하면 자동으로 모듈

화가 된다.

 

2. 모듈화된 css 를 사용할 jsx 에서 import를 해준다.

 

import styles from '경로' 로 작성해준다. styles라는 것을 사용해서 모듈화 해야한다.

 

3. jsx의 className에서 styles 를 사용해서 작업해준다.

코드 형식대로 중괄호 { } 로 묶어서 styles의 button을 가져온다는 의미로 styles.button 형식으로 해준다.

이렇게 button 1, button 2를 적용해주면 정상적으로 들어가 있는 것을 볼 수 있다.

styles 에서 자동적으로 다른 클래스로 변환해서 모듈화해준다.

 

우리는 더이상 네이밍을 생각하지 않아도 되고 헷갈릴 필요 없이 그냥 button1 안에 있는 css의 button을 가져오는 모듈화를 사용하면 된다.