(TIL6) React에서 webpack으로 css적용하기!

져니·2021년 7월 6일

React

목록 보기

6/12

이번엔 지난번 파일에서 작성했던거에 이어서 각 컴포넌트를 구분해주는 css를 적용하고자 합니다.

저는 수업에서 css 적용 방식을 3가지 배웠습니다.
1. html페이지에서 헤더부분에 link로 연결해주기
2. webpack을 이용해서 각 컴포넌트에 css를 연결해주기
3. 각각의 컴포넌트가 가지고 있는 css를 하나의 css파일로 묶어서 연결해주기

하나씩 자세히 살펴보겠습니다.

1. html페이지에서 헤더부분에 link로 연결해주기

1) index.css 파일을 만들고 코드를 넣어줍니다❗❕

*{
    margin:0;
    padding:0;
}

ul,li{
    list-style:none;
    padding:5px;
    margin:5px;
}

body{
    background:#000;
    color:#fff;
}

.Comp{
    border: 3px solid blue;
}

.ClassComp {
    border:3px solid red;
}

.FuncComp {
    border:3px solid yellow;
}

2) html 페이지 헤더부분에서 link를 이용해서 연결해줍니다!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="./dist/app.js"></script>
</body>
</html>

💻 결과물

2. webpack을 이용해서 각 컴포넌트에 css를 연결해주기

이번에는 webpack을 사용해서 각 컴포넌트별로 css를 적용해보겠습니다. 그러기 위해선 아래 패키지들을 깔아줘야 합니다!

⚙ 환경셋팅

1) npm install -D style-loader
=> css-loader로 가져온 파일들을 스타일 태그로 적용시켜줌

2) npm install -D css-loader
=> react페이지에서 import로 css파일을 가져올 수 있게 해주는 아이

3) npm install -D mini-css-extract-plugin

4) webpack.config.js에서 module안의 rules 배열 안에 두번째 값에 객체를 생성

    module:{
        rules:[{
            test:/\.jsx?$/,
            loader:'babel-loader',
            options:{
                presets:[
                    '@babel/preset-env',
                    '@babel/preset-react',

                ],
                plugins:[
                    'react-refresh/babel'
                ]
            }
        },{
            test:/\.css$/, //정규식 표현식, 일단 외워놓으세요
            use:['style-loader','css-loader'] // 뒤에있는 것부터 실행되기 때문에 꼭 css-loader를 2번째에 넣어줍니다.
        }]
    }

이렇게 환경을 셋팅한 뒤에 ClassComp.jsx, FuncComp.jsx,index.jsx파일에서 각각 import를 사용하여 css파일을 적용해줄 수 있다. 그러기 위해서 css 파일을 나눠서 작성하겠습니다.

ClassComp.css

.ClassComp {
    border:3px solid red;
}

FuncComp.css

.FuncComp {
    border:3px solid yellow;
}

index.css

*{
    margin:0;
    padding:0;
}

ul,li{
    list-style:none;
    padding:5px;
    margin:5px;
}

body{
    background:#000;
    color:#fff;
}

.Comp{
    border: 3px solid blue;
}

그리고 각각의 컴포넌트에 각각의 css를 연결해줍니다.

ClassComp.jsx

import React, {Component} from 'react'
import '../css/ClassComp.css' // ClassComp.css파일 ClassComp.jsx에 연결

class ClassComp extends Component{
    render(){
        return(
            <li className="ClassComp">ClassComp</li>
        )
    }
}

export default ClassComp

FuncComp.jsx

import React, {Component} from 'react'
import '../css/FuncComp.css' //FuncComp.css파일 FuncComp.jsx에 연결

const FuncComp = () => {
    return (
        <li className="FuncComp">
            FuncComp
        </li>
    )

}

export default FuncComp

index.jsx


import React,{Component} from 'react'
import ReactDOM from 'react-dom'
import App from './app' 
import './css/index.css' //index.css파일 index.jsx에 연결

ReactDOM.render(
    <App />,
    document.querySelector('#root')
)

💻 결과물

결과물을 보면 1번과 같습니다. 하지만 다른점이 있습니다❗❕

개발자 도구에서 코드를 보면 다음과 같이 스타일 태그가 3개가 적용되어 있는 모습을 볼 수 있습니다.
각각의 css파일이 아까 깔아줬던 css-loader패키지를 통해 읽히고 난 후 style-loader패키지를 통해 스타일 태그로 들어가있는 것입니다.
그렇다면 한꺼번에 스타일태그에 넣는 방법은 없는지 궁금해집니다❓❔❓❔

❗❕방법이 있습니다❗❕
아까 같이 깔아줬던 mini-css-extract-plugin 패키지를 사용하면 가능합니다.

3. 각각의 컴포넌트가 가지고 있는 css를 하나의 css파일로 묶어서 연결해주기

1) webpackconfig.js파일의 상단에 mini-css-extract-plugin패키지를 변수에 담아 가져옵니다.

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

2) webpackconfig.js파일에서 위에서 적었던 module안의 rules안의 두번째 배열값의 use의 값을 다음과 같이 변경해줍니다.

use:['style-loader','css-loader']

=> use:[MiniCssExtractPlugin.loader,'css-loader']

이제 css를 읽어서 style-loader 패키지를 이용하는 것이 아니라 mini-css-extract-plugin패키지를 이용하여 스타일 태그에 넣어줄 것입니다. 차이점은 결과물을 보면 알 수 있습니다!

3) webpackconfig.js파일 안의 plugins에 new MiniCssExtractPlugin({ filename:'app.css' })을 추가해줍니다.

    plugins:[
        new webpackPlugin(),
        new webpack.LoaderOptionsPlugin({debug:true}),
        new MiniCssExtractPlugin({ filename:'app.css' }) //각 컴포넌트의 css들을 묶어서 app.css로 만들것이다.
    ]

각 컴포넌트의 css들을 묶어서 app.css로 만들것임을 의미합니다.

3) 마지막으로 index.html에서 각 컴포넌트의 css들이 함께 담겨져 만들어진 app.css를 연결해줍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/app.css">
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="./dist/app.js"></script>
</body>
</html>