CSS 모듈을 사용하여 React 구성 요소의 스타일을 지정하는 방법

CSS 모듈을 사용하여 React 구성 요소의 스타일을 지정하는 방법

CSS 모듈은 CSS 클래스 이름의 범위를 로컬로 지정하는 방법을 제공합니다. 같은 클래스 이름을 사용할 때 스타일을 재정의하는 것에 대해 걱정할 필요가 없습니다.





CSS 모듈이 어떻게 작동하는지, 왜 사용해야 하는지, React 프로젝트에서 어떻게 구현하는지 알아보세요.



CSS 모듈이란 무엇입니까?

그만큼 CSS 모듈 문서 기본적으로 클래스 이름이 로컬 범위인 CSS 파일로 CSS 모듈을 설명합니다. 즉, 다른 CSS 파일에서 같은 이름의 CSS 변수를 처리할 수 있습니다.





일반 클래스처럼 CSS 모듈 클래스를 작성합니다. 그런 다음 컴파일러는 CSS를 브라우저로 보내기 전에 고유한 클래스 이름을 생성합니다.

예를 들어 styles.modules.css라는 파일에서 다음 .btn 클래스를 고려하십시오.



안드로이드 TV 박스를 위한 최고의 런처 
.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

이 파일을 사용하려면 JavaScript 파일로 가져와야 합니다.

import styles from "./styles.module.js"

이제 .btn 클래스를 참조하고 요소에서 사용할 수 있도록 하려면 아래와 같이 클래스를 사용합니다.



class="styles.btn"

빌드 프로세스는 CSS 클래스를 다음과 같은 형식의 고유한 이름으로 대체합니다. _스타일__btn_118346908.

클래스 이름의 고유성은 다른 구성 요소에 대해 동일한 클래스 이름을 사용하더라도 충돌하지 않는다는 것을 의미합니다. 구성 요소의 CSS 스타일을 해당 구성 요소와 관련된 단일 파일에 저장할 수 있으므로 더 큰 코드 독립성을 보장할 수 있습니다.



이것은 특히 여러 스타일시트로 작업하는 경우 디버깅을 단순화합니다. 특정 구성 요소에 대한 CSS 모듈만 추적하면 됩니다.

CSS 모듈을 통해 여러 클래스를 결합할 수도 있습니다. 작곡 예어. 예를 들어, 위의 다음 .btn 클래스를 고려하십시오. compose를 사용하여 다른 클래스에서 해당 클래스를 '확장'할 수 있습니다.

제출 버튼의 경우 다음을 수행할 수 있습니다.

.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

이것은 .btn 및 .submit 클래스를 결합합니다. 다음과 같이 다른 CSS 모듈에서 스타일을 작성할 수도 있습니다.

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

다른 규칙보다 먼저 작성 규칙을 작성해야 합니다.

React에서 CSS 모듈을 사용하는 방법

React에서 CSS 모듈을 사용하는 방법은 React 애플리케이션을 만드는 방법에 따라 다릅니다.

create-react-app을 사용하면 CSS 모듈이 즉시 설정됩니다. 그러나 처음부터 응용 프로그램을 만들려면 webpack과 같은 컴파일러로 CSS 모듈을 구성해야 합니다.

이 자습서를 따르려면 다음이 필요합니다.

  • 컴퓨터에 설치된 노드입니다.
  • ES6 모듈에 대한 기본 이해.
  • 기본 리액트의 이해 .

React 애플리케이션 만들기

일을 간단하게 유지하기 위해 다음을 사용할 수 있습니다. 반응 앱 만들기 React 앱을 스캐폴딩합니다.

이 명령을 실행하여 새로운 React 프로젝트 생성 react-css-modules라고 합니다.

npx create-react-app react-css-modules

이렇게 하면 React를 시작하는 데 필요한 모든 종속성이 포함된 react-css-modules라는 새 파일이 생성됩니다.

버튼 컴포넌트 생성

이 단계에서는 Button 구성 요소와 Button.module.css라는 CSS 모듈을 만듭니다. src 폴더에 Components라는 새 폴더를 만듭니다. 해당 폴더에 Button이라는 다른 폴더를 만듭니다. 이 폴더에 Button 구성 요소와 해당 스타일을 추가합니다.

로 이동 src/구성 요소/버튼 Button.js를 만듭니다.

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

그런 다음 Button.module.css라는 새 파일을 만들고 다음을 추가합니다.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

Button 구성 요소에서 이 클래스를 사용하려면 스타일로 가져오고 다음과 같이 버튼 요소의 클래스 이름에서 참조합니다.

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</button> 
    ) 
}

이것은 단일 클래스를 사용하는 방법을 보여주는 간단한 예입니다. 다른 구성 요소 간에 스타일을 공유하거나 클래스를 결합할 수도 있습니다. 이를 위해 이 기사에서 이전에 언급한 대로 compose 키워드를 사용할 수 있습니다.

집에서 TV용 안테나를 만드는 방법

컴포지션 사용

먼저 다음 코드로 Button 구성 요소를 수정합니다.

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</button> 
    ) 
}

이 코드는 유형 값을 소품으로 수락하여 Button 구성 요소를 보다 동적으로 만듭니다. 이 유형은 버튼 요소에 적용되는 클래스 이름을 결정합니다. 따라서 버튼이 제출 버튼인 경우 클래스 이름은 '제출'이 됩니다. '오류'이면 클래스 이름은 '오류'가 되는 식입니다.

각 버튼의 모든 스타일을 처음부터 작성하는 대신 compose 키워드를 활용하려면 Button.module.css에 다음을 추가하세요.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #FFFFFF; 
}

이 예에서 기본 클래스와 보조 클래스는 btn 클래스를 사용합니다. 이렇게 하면 작성해야 하는 코드의 양이 줄어듭니다.

라는 외부 CSS 모듈을 사용하여 이 작업을 더 수행할 수 있습니다. 색상.모듈.css , 응용 프로그램에 사용된 색상을 포함합니다. 그런 다음 이 모듈을 다른 모듈에서 사용할 수 있습니다. 예를 들어 다음 코드를 사용하여 Components 폴더의 루트에 colors.module.css 파일을 만듭니다.

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

이제 Button/Button.module.css 파일에서 위의 클래스를 다음과 같이 사용하도록 기본 및 보조 클래스를 수정합니다.

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.module.css"; 
}

CSS 모듈을 사용한 Sass

CSS 모듈을 사용하여 코드베이스의 모듈성을 개선할 수 있습니다. 예를 들어 버튼 구성 요소에 대한 간단한 CSS 클래스를 만들고 합성을 통해 CSS 클래스를 재사용할 수 있습니다.

CSS 모듈 사용을 강화하려면 Sass를 사용하십시오. Sass(Syntactically Awesome Style Sheets)는 수많은 기능을 제공하는 CSS 전처리기입니다. 여기에는 CSS에서 사용할 수 없는 중첩, 변수 및 상속에 대한 지원이 포함됩니다. Sass를 사용하면 애플리케이션에 더 복잡한 기능을 추가할 수 있습니다.