React - module CSS 사용하는 방법 3가지

React로 개발되어 있는 사이트를 개발자소스로 확인해보면 Class 명에 Hash 코드로 되어있는 명칭을 볼 수 있습니다.

React Module 기능을 사용하면 CSS의 중복을 방지할 수 있는 장점이 있습니다.

CSS Module이란?

CSS를 사용할 때 클래스 이름을 고유한 값(Hash)으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지하는 기술이다.

1. 인라인 스타일로 사용하는 방법

style을 사용하여 특정 React 구성 요소에 직접 스타일을 적용할 수 있습니다.

일회성 스타일 변경 또는 별도의 스타일시트가 필요하지 않은 작은 자체 포함 구성 요소에 유용합니다.

import React from 'react';
function MyComponent() {
  return (
    <div style={{ color: 'red', fontSize: '24px' }}>
      Hello, world!
    </div>
  );
}

2. CSS 모듈로 사용하는 방법

CSS 모듈을 사용하여 자동으로 변환되고 특정 구성 요소로 범위가 지정되는 일반 CSS를 작성할 수 있습니다.

CSS 모듈을 사용하려면 css-loader및 style-loaderwebpack 로더를 설치한 다음 CSS 파일을 JavaScript 모듈로 가져와야 합니다.

import React from 'react';
import styles from './MyComponent.module.css';
function MyComponent() {
  return (
    <div className={styles.container}>
      Hello, world!
    </div>
  );
}

CSS 파일은 아래와 같습니다.

.container {
  color: red;
  font-size: 24px;
}

3. 전역변수로 사용하는 방법

여러 구성 요소에서 공유되는 스타일을 적용하려는 경우 별도의 스타일시트를 만들어 HTML 파일에 포함할 수 있습니다.

응용 프로그램 전체에서 사용되는 재설정 스타일 또는 글꼴과 같은 항목에 유용합니다.

styled-componentsReact 애플리케이션에서 전역 스타일을 적용하려면 또는 같은 라이브러리를 사용해야 합니다.

import React from 'react';
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
  body {
    font-family: sans-serif;
  }
`;
function App() {
  return (
    <div>
      <GlobalStyle />
      <div>Hello, world!</div>
    </div>
  );
}