Vanilla React 2편 - SCSS 모듈 적용하기

이전편에서 JSX를 이용해서 함수형 컴포넌트를 만들어보았다.

이번에는 css 전처리기 모듈인 scss를 적용해보려고 한다.

 

css 전처리기란 무엇일까?

vanilla css를 사용할 수도 있지만 프로젝트를 할 때 css 전처리기 또는 CSS-In-JS를 많이 사용한다.

css 전처리기는 mixins라는 것을 통해 재사용 가능한 CSS 규칙을 만들 수 있고 기존 스타일을 확장하거나

상속받아 새로운 스타일을 정의할 수 있다. 이렇게 작성된 코드는 일반 CSS로 컴파일되어 사용된다.

 

이와 달리 CSS-In-JS는 동적으로 스타일을 생성하여 런타임에 스타일을 생성한다.

JSX로 합쳐진 HTML, Javascript 파일에 CSS까지 추가할 수 있게 되는 것이다.

동적인 스타일링을 할 때 유리하지만 런타임에 스타일이 적용되는 만큼 오버헤드가 발생할 수 있게 된다.

 

일반 css를 사용해도 되지만 css를 모듈화해서 스타일의 이름을 겹쳐도 상관없게 설정하는 동시에

css로 인한 런타임 에러 상황은 만들고 싶지 않았다.

그래서 제일 많이 쓰이는 scss 모듈을 프로젝트에 적용해보았다.

 

패키지 추가

jsx를 설정할 때와 같이 scss관련 패키지들을 설치해야한다.

필자는 yarn 패키지를 쓰기 때문에 yarn add 명령어를 사용했다.

npm을 사용하면 npm install, pnpm을 사용하면 pnpm add를 사용하면 된다.

yarn add --dev css-loader mini-css-extract-plugin sass sass-loader

Webpack 설정

패키지를 설치했으면 이제 webpack에도 설정을 해줘야한다.

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    },
    compress: true,
    port: 9000
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

이렇게 설정하면 빌드했을 때 scss파일이 컴파일되어 css파일이 생성된다.

 

하지만 이렇게만 설정해서는 scss파일을 모듈로 사용하는게 아니다.

같은 이름의 스타일을 다른 컴포넌트에 적용해보면 알 수 있다.

 

보통 scss 모듈을 사용할 때는 style.module.scss 같은 형식을 사용한다.

그러면 이 포맷을 webpack에 추가해주면 된다.

      {
        test: /\.module\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              esModule: false,
              modules: {
                localIdentName: '[name]__[local]___[hash:base64:5]'
              },
              importLoaders: 1
            }
          },
          'sass-loader'
        ]
      },
      {
        test: /\.scss$/,
        exclude: /\.module\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }

이렇게 webpack 중간의 옵션을 수정해주면 된다.

무슨 뜻인지 하나하나 알아보면

test: /\.module\.scss$/ - 파일명이 .module.scss로 끝나는 파일

options:

esModule: false - CommonJS 모듈 문법을 사용

modules { localIdentName } 옵션 - css 파일을 모듈로 사용할 수 있게 앞에 파일명, 로컬 클래스명을 붙여 css 구분

importLoaders: 1 - CSS 내의 @import 구문을 처리할 때 아래 추가한 로더인 'sass-loader' 사용

 

더 자세한 내용은 webpack 공식 사이트에서 확인해볼 수 있다.
이렇게 설정을 하고 프로젝트에 scss 모듈을 사용해서 빌드하면 dist폴더에 main.css 파일이 생긴다.

main.css파일을 확인해보면 scss 모듈로 만든 클래스는 아래와 같은 이름으로 자동으로 변경해준 것을 알 수 있다.

.button-module__clickBtn____KCjq

 

여기까지 scss 전처리기 모듈 설정 끝! 다음엔 fiber에 대해서 알아보고 간단하게 적용해볼 예정이다.