React - css 적용하기

 

 

< 목차 >

1. React에서 css 적용하기
2. css 파일을 import 하기
3. module.css 파일 import 하기
4. styled-components 만들기

 

 

 

1. React에서 css 적용하기 

webpack은 기본적으로 NodeJs 환경에서 실행된다. JavaScript 파일들을 묶어서 bundle 해주는 것이기 때문에 css 파일을 적용하는 것 역시 같은 맥락에서 바라보아야 한다. 만약 jsx 파일 안에서 css 파일을 import 해올 수 있다면 webpack에서 파일을 bundle할 때 css 파일 역시 bundle 해주게 될 것이다.

 

이러한 방식으로 css를 적용하기 위해서는 webpack.config.js 파일 안에서 css 처리와 관련된 추가적인 설정을 해주어야 한다. 우선 다음의 라이브러리를 설치해주도록 하자.

npm install -D mini-css-extract-plugin css-loader

참고로 css-loader 이외에 style-loader 라는 라이브러리도 존재하는데 css-loader가 className으로 css를 적용하는 라이브러리라면 style-loader는 인라인 형태로 css 적용이 가능하게끔 해주는 라이브러리이다. 주의할 점은 두 라이브러리를 같이 설치했을 경우 추가적인 설정을 해줘야만 한다.

 

• css-loader  :  className으로 css 적용 가능한 라이브러리
• style-loader  :  인라인 형태로 css 적용 가능한 라이브러리

설치를 마쳤다면 이전 포스팅에서 작성해 놓았던 webpack.config.js 파일 안에 css 처리와 관련된 설정들을 추가해주도록 하자.  

2022.04.20 - [React] - React - webpack.config.js

React - webpack.config.js

const path = require('path')  
const webpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')  // css 설정

module.exports = {

    name: 'react-project',
    mode: 'development',

    // 확장자 내용을 제거 혹은 특정 확장자만 사용하겠다.
    resolve: {
        extensions: ['.js', '.jsx']
    },
    
    // entry는 받을 거, output은 내보낼 거
    // module은 받으면서 추가적으로 더 넣을 것
    // entry : 번들할 대표 파일 하나.
    entry: {
        app: ['./src/index.jsx']
    },

    // module에 내용을 추가하는 것이 plugin
    module: {
        rules: [{
            test: /\.jsx?/,
            loader: 'babel-loader',  // webpack과 babel을 연결해주는 babel 라이브러리
            options: {
                // presets: ['@babel/preset-env', '@babel/preset-react']
                presets: [
                    ['@babel/preset-env', {  // babel/preset-env의 옵션 설정
                        targets: {
                            browsers: [  // browserslist에 알맞는 텍스트 형태로 입력
                                'last 2 chrome versions',
                                '> 5% in KR'
                            ]
                        },
                        debug: true
                    }],  // 옛날 브라우저에서도 환경에 맞게 실행해주는 옵션
                    '@babel/preset-react'  // JSX 사용하기 위해
                ],
                // babel에 대한 plugin (babel에 내용 추가)
                plugins: [
                    'react-refresh/babel'
                ]
            }
        },
        // css 설정
        {
            test: /\.css$/,
            // use: [MiniCssExtractPlugin.loader, 'css-loader']
            // 옵션값을 넣어주고 싶다면 아래와 같이 객체 안에 담아서 작성
            use: [{
                loader: MiniCssExtractPlugin.loader,
                options: {
                    // 옵션 내용
                }
            },
            'css-loader'
            ]
        }]
    },

    // 전체에 대한 plugin
    plugins: [
        new webpackPlugin(),
        new MiniCssExtractPlugin({ filename: 'style.css' })  // css 파일 생성해주는 plugin
    ],

    // 내보낼 파일의 위치와 파일명 (번들 한 파일) 
    // 내보내기 전에 module과 plugins이 실행됨.
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/dist'
    },

    devServer: {
        static: {
            directory: path.join(__dirname, 'public')
        },
        compress: true,
        port: 3000,
        hot: true,
        historyApiFallback: true  // 새로고침 적용
    },

}

 

 

 

2. css 파일 import 하기 

css 파일을 import 해서 css를 적용시키는 방법은 생각보다 간단하다. css 파일을 만든 후 해당 css 파일을 적용시킬 jsx 파일 안에서 import를 통해 css 파일을 가져오기만 하면 된다. 그리고 index.html 파일 안에서 <link>엘리먼트를 사용해 번들한 css 파일을 가져오면 된다.

 

우선 아래와 같이 src 디렉토리 안에 css 파일을 모아놓을 assets 디렉토리를 생성한 후 app.css 파일을 만들어보았다.

app.css

 

index.html 파일 안에 <link>엘리먼트를 추가한다.

index.html

 

마지막으로 App.jsx 파일 안에서 다음과 같이 css 파일을 import 해주면 된다.

App.jsx

 

다음과 같이 app.css 파일에 적힌 내용대로 css가 적용된 것을 확인할 수 있다.

css 적용 결과

 

 

 

 

3. module.css 파일 import 하기 

두번째 방법은 module.css 파일을 만들어서 css를 적용하는 방법이다. 위에서 언급했던 css 파일을 import 해오는 방법은 클래스명이 같을 경우 css 적용이 꼬일 수도 있다는 문제점이 있다. 이러한 문제점을 보완한 것이 module.css 파일을 만들어서 적용하는 방식이다. module.css 파일을 만들어서 css를 적용하게 되면 클래스명이 고유한 값으로 해싱되기 때문에 혹여나 클래스명이 겹쳐서 css가 꼬이게 되는 문제를 방지할 수 있다.

 

module.css 파일을 생성할 때는 [파일명].module.css 형식으로 만들어주도록 하자. 

적용하는 방법은 아래와 같다.

App.jsx

 

다음과 같이 test1.module.css 파일과 test2.module.css 파일 안에 동일한 클래스명이 사용되었어도 각각 다르게 css가 적용되는 것을 확인할 수 있다. 

test1.module.css , test2.module.css

 

css 적용 결과

 

 

 

4. styled-components 만들기 

세번째 방법은 styled-components를 만들어서 css를 적용하는 방법이다. 이 방법은 css가 적용된 상태로 component를 만드는 방식이다. styled-components를 만들기 위해서는 아래와 같이 라이브러리를 추가적으로 설치해줘야한다.

npm install styled-components

 

styled-components를 사용할 때는 import문을 통해 라이브러리를 불러온 다음 변수 형태로 컴포넌트를 제작하는 방식으로 사용한다. 다음과 같은 방식으로 component를 만들어주면 된다.

 

👉 const [컴포넌트명] = styled.[엘리먼트명].` css 내용 `

 

마지막에 백틱( ` )을 사용해서 적용하고 싶은 css 내용을 적어준다는 것에 유의하도록 하자.

 

App.jsx

css 적용 결과

 

styled-components를 사용하면 위에서 언급했던 두가지 방법처럼 css 파일을 만들어 줄 필요가 없다. component를 만들 때 css가 들어간 형태로 component를 만들어주기 때문에 추가적인 css 파일이 필요하지 않게 되는 것이다. 

 

또한 styled-components는 만들어 놓은 component의 내용을 그대로 가져온 다음 새로운 내용만 추가하는 방식으로도 사용 가능하다. 기존 내용을 갖고 있는 상태에서 추가된 내용이 덮어쓰여지는 형태로 새로운 component가 생성된다. 기존에 존재하는 component를 가져와서 사용할 때는 다음과 같은 방식으로 만들어주면 된다.

 

👉 const [컴포넌트명] = styled( [재사용 할 컴포넌트명] )` css 내용 `

 

위에서 만들었던 <Button /> component의 내용을 그대로 가져와서 새로운 내용을 추가한 component를 만들어보자.

App.jsx

css 적용 결과

 

styled-components에서는 css를 적용할 때 변수를 이용해 특정한 조건이 만족되었을 때 css 적용 결과가 달라지게 하는 작업도 가능하다. 기본적으로 component 형식으로 만들어진 css이기 때문에 props를 전달하는 것이 가능하며 함수 역시 사용 가능하다.

 

styled-components에서 props를 사용하는 방법은 다음과 같다.

App.jsx

css 적용 결과

 

props를 이용해 값을 전달받을 때는 css 내용을 적는 공간에서 ${ (props) => props.[변수명] } 를 사용해주면 된다. 그리고 ${ } 안에 들어갈 함수를 따로 만들어서 집어 넣는 것도 가능하다.

css 적용 결과