현재 실무에서 사용되고 있는 CSS 기술은 방식이 매우 다양하다. 바닐라 상태에서 사용하는 방법도 여러가지이고, 라이브러리를 사용하는 방법 또한 여러가지이다. 일단 대중적인 방법 몇 개를 찾아 정리해보려 한다.

1. 외부에 CSS 속성 파일을 생성하여, 스타일을 정의한 다음 컴포넌트에서 import.

가장 기본적인 사용 방법. React.js의 CRA를 사용하여 프로젝트를 생성했을 때에도 이 방법을 사용하고 있는 것을 볼 수 있다. 스타일을 적용할 컴포넌트에 ClassName 혹은 id의 값을 지정하고, 이를 매개로 CSS 속성 파일에서 스타일을 설정한다.

<컴포넌트>

import "./style.css";

const Component = () => {
    return (
        <div className='div1'>

        </div>
        <div id='div2'>

        </div>
    );
};



<CSS 속성 파일>

.div1 {
    color: red;
};

#div2 {
    color: blue;
};

2. 컴포넌트 내부에서 스타일 속성을 정의하여 사용.

const divStyle = {
  color: "white",
};

const Component = () => {
      return (
        <div style={divStyle}>

        </div>;
    );
};

다만 이 방식의 경우 :hover나 :active 같은 추가적인 스타일 적용이 불가능하고, 유지 보수나 프로젝트 성능이 저하되는 이유 등으로 권장하지 않는 방법이라고 한다. 정말 간단한 스타일만 적용할 생각이거나 임시로 스타일을 적용할 때 적합한 방식.

3. CSS Modules

프로젝트의 규모가 커질 수록 CSS 속성 연결에 사용할 ClassName이나 id의 명칭을 정하는 것도 상당한 부담으로 다가온다. 특히나 이들을 기반으로 CSS의 속성을 적용하는데는 기본적으로 범위가 전역 명칭으로 간주되기 때문에 명칭이 중복될 경우 스타일 적용도 중복되기 때문에 혼란이 발생하게 된다.

이 문제를 해결하기 위한 방법은 여러가지이지만 여기서는 각 CSS 파일에 고유의 네임 스페이스를 부여해주는 CSS 모듈(CSS Modules)이라는 기법만을 정리해보려 한다. CSS 모듈은 각 CSS 파일마다 고유한 네임 스페이스를 부여해주기 때문에, 각 React 컴포넌트는 완전히 격리된 스타일을 보장받는다고 한다.

CSS 모듈 사용 시 아래와 같은 규칙을 지켜야한다.

• 외부 CSS 파일을 사용하되, 파일의 확장자는 .css가 아닌 .module.css을 사용해야 한다.

• 컴포넌트 파일에서 외부 CSS 파일을 import할 때, 컴포넌트 내에서 이를 호출하기 위한 CSS 모듈의 이름을 명시적으로 지정해준다.

• HTML 태그에서 스타일을 적용할 때, 스타일 명칭은 점 표기법을 사용하여 CSS 모듈의 이름과 함께 사용한다.

  <컴포넌트>
  
  import styles from "./style.module.css";
  
  const Component = () => {
      return (
          <div className={styles.div1}>
  
          </div>
      );
  };

      <CSS 속성 파일>

      .div1 {
          color: red;
      };

4. styled-components

이 방법은 이 포스팅에서..