<React> postCSS

사실 React는 아니지만 React를 접하고 처음 postCSS를 사용하게 되어 이 시리즈에서 작성하게 되었습니다.

postCSS를 사용하면 BEM naming 기법을 사용하지 않고 class name을 정해줄 수 있습니다. 예를 들어 header.jsx에만 적용되는 css를 만들고 싶다고 하면 header.module.css라는 이름으로 파일을 만들어줍니다.

project

project
  |--header.jsx
  |--header.module.css

header.jsx

아래 처럼 css파일을 import 해주고 class명을 styles.header 나 styles.item 처럼 비교적 자유롭게 할당해줍니다.

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

function Header(){
  return (
    <div className={styles.header}>
      <div className={styles.item}>
    </div>
  );
}

header.module.css

위에서 styles.header와 styles.item으로 지정해둔 것을 아래와 같이 사용할 수 있습니다. 이렇게 되면 모듈끼리 클래스명이 중복되더라도 서로의 스타일에 영향을 주지 않습니다. 이런것이 가능한 이유는 각 클래스명에 고유의 id와 같은 값을 부여하기 때문입니다.

.header{
  /*원하는 스타일링*/
}
.item{
  /*원하는 스타일링*/
}