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

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

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


CSS Module이란?

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


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

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

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

  1. import React from 'react';
  2. function MyComponent() {
  3. return (
  4. <div style={{ color: 'red', fontSize: '24px' }}>
  5. Hello, world!
  6. </div>
  7. );
  8. }


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

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

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

  1. import React from 'react';
  2. import styles from './MyComponent.module.css';
  3. function MyComponent() {
  4. return (
  5. <div className={styles.container}>
  6. Hello, world!
  7. </div>
  8. );
  9. }

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

  1. .container {
  2. color: red;
  3. font-size: 24px;
  4. }


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

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

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

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

  1. import React from 'react';
  2. import { createGlobalStyle } from 'styled-components';
  3. const GlobalStyle = createGlobalStyle`
  4. body {
  5. font-family: sans-serif;
  6. }
  7. `;
  8. function App() {
  9. return (
  10. <div>
  11. <GlobalStyle />
  12. <div>Hello, world!</div>
  13. </div>
  14. );
  15. }


* 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
작성자 소개
최찬희 프로필
WrapUp 블로거

최찬희

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^

댓글작성