React의 CSS 모듈

소개

이 React 시리즈의 이전 블로그에서 저는 React에서 CSS를 사용하여 스타일을 지정하는 몇 가지 방법(스타일시트 및 인라인 스타일)에 대해 썼습니다.

React의 두 가지 CSS 스타일링 옵션

rwparrish ・ 10월 24일 ・ 3분 읽기

#react #beginners #javascript #codenewbie

물론 그것들은 사용 가능한 많은 옵션 중 두 가지에 불과합니다. 나는 최근에 styled-components을 가지고 놀았습니다. 다양한 방법을 직접 시도하여 선호하는 방법을 확인하는 것이 좋습니다.

이 읽기에서는 CSS 모듈을 사용하는 방법에 대한 짧은 연습을 하고 싶습니다. CSS 모듈here에 대해 자세히 알아볼 수 있습니다.

아래에서 다루는 모든 것은 React 스크립트 2.X 이상을 사용하는 경우에만 작동합니다. 더 낮은 버전을 사용하는 경우 CSS 모듈을 계속 사용할 수 있지만 여기에서 다루지 않을 몇 가지 추가 단계가 있습니다.

첫째, CSS 모듈을 사용하는 이유는 무엇입니까?

이 비교적 새로운 스타일링 옵션을 확인해야 할 몇 가지 이유가 있습니다.

1. 관심사 분리 - CSS 스타일 시트를 사용하여 일반 CSS 코드를 작성하면 JavaScript 파일(React의 구성 요소)을 깨끗하게 유지할 수 있습니다.

2. 범위 - CSS 모듈을 사용하면 CSS 코드를 별도의 파일에 보관하면서 스타일 범위를 원하는 구성 요소 또는 요소로 지정할 수 있습니다(관심 사항 분리).

3. 사용 용이성 - CSS 모듈의 작동 방식을 이해하면 구현이 다소 간단하고 코드가 우아합니다.

지도 시간

새로운 React 앱에서 CSS 모듈을 사용하려면 몇 군데에서 키워드module를 사용해야 합니다.

import classes from './App.module.css'

some code...

구문 위의 가져오기module에서. 또한 CSS 파일의 이름을 바꿔야 합니다. 따라서 App.css는 App.module.css가 됩니다. 이렇게 하면 CSS 모듈을 사용하여 앱의 스타일을 지정할 준비가 된 것입니다. 코드를 살펴보겠습니다.

Person.module.css 파일에서:

.Person {
    width: 60%;
    margin: 16px auto;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding: 16px;
    text-align: center;
}

Person.js(구성 요소) 파일에서:

import classes from './App.module.css'

const person = ( props ) => {
    return (
        <div className={classes.Person}>
            <p onClick={props.click}>I'm {props.name} and I am {props.age} years old!</p>
            <p>{props.children}</p>
            <input type="text" onChange={props.nameChange} value={props.name}/>
        </div>
    )
};

공지사항<div className={classes.Person}> . 여기서 가져온 JS 객체classes에는 Person 속성이 있습니다. 해당 속성에는 자동으로 생성된 CSS 클래스가 매핑되어 있습니다. Person__Person__ah5_1 처럼 보입니다.

이면에서 React는 자동으로 고유한 CSS 클래스 이름을 생성합니다. JS 개체를 가져오고 거기에서 클래스를 할당하면 동적으로 생성된 고유한 이름을 사용할 수 있습니다. 따라서 가져온 JS 객체는 생성된 CSS 클래스 이름을 값으로 보유하는 일부 속성을 노출합니다.

또한 CSS 파일을 다른 구성 요소로 가져오는 경우 거기에 있는 classes 개체는 다른 CSS 클래스 이름을 생성하는 Person 속성을 보유합니다. 스타일 지정 범위가 지정됩니다! 백그라운드에서 생성된 CSS 클래스 이름(문자열)이 무엇인지 모르기 때문에 실수로 다른 구성 요소의 스타일을 지정하는 데 사용하지 않을 것입니다.

하나 더. 대신 실제로 앱의 어디에서나 .module.css 파일에 정의된 CSS 클래스를 사용하고 해당 스타일을 수신하려면(고유하게 생성된 클래스 이름을 피함) 선택기 앞에 :global 를 붙일 수 있습니다.

예시:

:global.Person {
    width: 60%;
    margin: 16px auto;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding: 16px;
    text-align: center;
}

요약

CSS 모듈을 사용하면 일반 CSS 코드를 작성하고 지정된 구성 요소에만 적용되도록 할 수 있습니다. 또한 JS 파일이 복잡해지는 것을 방지하기 때문에 이 방법을 선호합니다.

당신이 무언가를 배웠기를 바랍니다. 언제나처럼 질문하고, 피드백을 남기고, 계속 코딩하세요!✌️