분류 Reactjs

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

컨텐츠 정보

  • 조회 354 (작성일 )

본문

CSS 모듈은 React 컴포넌트를 스타일링하는 가장 보편적인 방법 중 하나입니다. CSS만 사용하든 SASS와 같은 고급 전처리기를 사용하든 상관없이 CSS 모듈에는 중요하지 않습니다. 이러한 모든 스타일을 React 컴포넌트 옆의 스타일 시트 파일에 작성할 수 있습니다.


우리는 커스텀 React + Webpack 어플리케이션 위에 구축하고 있기 때문에 React에서 CSS 모듈 사용을 시작하기 전에 우리 측에서 설정해야 합니다. Arpit Batra의 작동 방식을 보여 주셔서 감사합니다.


https://www.robinwieruch.de/react-css-modules 


참고 : create-react-app를 사용하는 경우 CSS 모듈을 사용하여 이 React 앱 작성 학습서를 따르십시오. CSS 모듈이 기본 제공됩니다. 이전의 튜토리얼에서 사용자 정의 React + Webpack 설정을 사용하는 경우 사용자 정의 React 프로젝트에서 CSS 모듈 설정에 대해 계속 읽으십시오.


먼저 Webpack을 위한 로더가 더 필요합니다. 이 로더는 Webpack이 CSS 파일도 번들 할 수 있게 합니다.


npm install css-loader style-loader --save-dev 


둘째, webpack.config.js 파일에서 CSS 파일 해석을 위한 새 로더를 추가하십시오.


module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
  ...
};
이미 Webpack의 CSS 모듈 설정에 대한 것입니다. 다음으로 첫 번째 CSS 파일을 정의 할 수 있습니다. 이름을 src/style.css로 지정하겠습니다.

.title {
  color: blueviolet;
}
그런 다음 React 컴포넌트 중 하나에서 CSS 파일을 가져올 수 있습니다. 이후에는 React 컴포넌트의 CSS 파일에 정의 된 CSS 클래스를 이미 사용할 수 있습니다. 가져 와서 정의 된 CSS 클래스를 React 컴포넌트에서 className prop로 사용하십시오.

import React from 'react';
import styles from './style.css';
const App = ({ title }) => (
  <div className={styles.title}>{title}</div>
);
export default App;
여기에서 React 컴포넌트 옆에 더 많은 CSS 파일을 추가 할 준비가 되었습니다. 일반적으로 각 React 구성 요소마다 하나의 스타일 파일을 사용합니다. 이 CSS 파일에서 React 컴포넌트의 스타일을 지정하는 데 필요한 만큼의 CSS 클래스를 추가 할 수 있습니다. CSS 파일에서 스타일을 가져 와서 React 컴포넌트에서 이전에 표시된 대로 사용하십시오.


         


        
                  

  				  

                                            

          





                  

                

    


    
    
    
        
        
        

          CSS 모듈