React 18 webpack building

폴더 구조

//React18
├─ dist
├─ package-lock.json
├─ package.json
├─ public
│ └─ index.html
├─ src
│ ├─ App.js
│ ├─ index.js
│ └─ index.css
└─ webpack.config.js

public: HTML 템플릿과 이미지 파일 등 절대경로로 쓰이는 파일이 위치하는 장소
src: 기본적으로 작성하는 소스코드가 위치하는 장소
dist: 웹팩이 번들링된 결과를 저장하는 장소

JS 모듈 번들러와 웹팩(Webpack)

• 패키지 생성
  npm init
  터미널을 통해 npm 명령어로 패키지를 생성해줍니다. 작성자 및 프로젝트 이름은 개별 설정해줍니다.

• 패키지 설치
  리액트

  npm i react react-dom

웹팩

npm i -D webpack webpack-cli webpack-dev-server
웹팩과 플러그인은 개발환경에서만 필요하므로 설치 시 '-D' 또는 '--save-dev' 옵션을 추가해줍니다.

• 웹팩 플러그인

  npm i -D babel-loader clean-webpack-plugin css-loader style-loader cross-env dotenv dotenv-webpack
  

  babel-loader: 웹팩에서 바벨을 사용할 수 있도록 처리
  CleanWebpackPlugin: 이전에 번들된 파일 자동 삭제
  HtmlWebpackPlugin: HTML 템플릿 설정
  css-loader/style-loader: CSS 관련 파일 처리
  

• 바벨

  npm i -D @babel/core @babel/preset-env @babel/preset-react

• 웹팩 설정
  const path = require('path')
  const webpack = require('webpack')
  const dotenv = require("dotenv");
  const Dotenv = require("dotenv-webpack");
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = () => {

    dotenv.config({
      path: envPath,
    });

    return {
        name: 'React18-webpack-babel-setting', // 설정 이름
        mode: 'development', // production, development // 설정 모드
        devtool: 'eval',
        entry: {
            app: './src/index.js',
        },
        module: {
            rules: [
                {   // 리액트 바벨 설정
                    test: /\.js/, 
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env', '@babel/preset-react']
                        }
                    }
                },
                {
                    test: /\.css$/i,
                    use: ["style-loader", "css-loader"],
                },
            ]
        },
        plugins: [
            new Dotenv({
              path: envPath,
            }),
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin(
                { 
                    template: './public/index.html', // 템플릿 설정
                    minify: true, // 압축 설정
                }
            ),
            new webpack.ProvidePlugin({ // 리액트 자동 로드
                "React": "react",
            }),
        ],
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'app.js',
            publicPath: '/',
        },
        devServer: { // 개발 서버 설정
            static: './dist',
            port: 3000,
            hot: true, // 핫 모듈 교체(HMR) 활성화
            compress: true,
            open: true,
            historyApiFallback: true,
        }
    }
}
}),

컴포넌트마다 import React from 'react' 선언을 꼭 해줘야 하는데요. 위처럼 플러그인 하나 추가해주면 리액트 라이브러리가 필요한 곳에는 웹팩이 알아서 넣어줍니다.

src/index.js
import ReactDom from 'react-dom/client'
import App from './App'
import './index.css'

const root = document.getElementById('macjjuni')

ReactDom.createRoot(root).render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>,
);

// 리액트 18 이전 버전
// ReactDom.render(
//    <App/>,
//    document.getElementById("root")
// )

리액트 18 이전 버전에서는 ReactDom.render 함수를 사용했으나
React 18 이후 ReactDom.createRoot().render 함수로 변경되었습니다.