[Node] React 정리(5) - react-router-dom 에서 존재하지 않는 페이지 커스터마이징

리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다.

 

 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다.

 

 리액트로 존재 하지 않는 페이징 처리를 위한 준비는 아래와 같습니다.

 먼저 라우터가 설정되어 있어야 합니다. 기본적인 라우터는 react-router-dom을 이용하여 Switch로 존재하지 않는 URI를 페이징 처리 할 수 있습니다.

 두번째로는 제 프로젝트 특성 상 웹팩을 사용하기 때문에 본 문서를 이용해 페이징 처리를 하기 위해서는 웹팩의 환경이어야 합니다. 물론 웹팩 환경이 아닌 리액트에서도 할 수 있습니다만 저는 현재 웹팩 환경으로 진행하고자 합니다. 웹팩 환경이 아니신 분들은 본 문서가 도움이 되지 않습니다. 주의해주시기 바라며 일단 시작해보도록 하겠습니다.

 

 

# Contents

---

• 라우터 처리 설정
• 웹팩 설정

 

 

# 라우터 처리

---

 존재하지 않는 페이지를 라우터 처리를 하고자 합니다. 페이지가 존재하지 않기 때문에 라우터의 맨 마지막에 작성을 해주셔야 할 것입니다. 스위치의 특성 상 현재 웹페이지 상의 URI를 스위치에 정의 된 순서대로 찾은 후에 없으면 에러 메시지를 출력하기 때문입니다. 

 

 아래 코드를 통해 존재하지 않는 웹페이지를 처리할 수 있습니다.

 

import { NotFound } from "./component/notFound.js";

var html = htm.bind(react.createElement);

export class App extends react.Component {
    render() {
        return html`<${Switch}>
        <${Route} path="/" exact=${true} component=${MainIndex} />
        <${Route} path="/list/:listId" component=${MyList} />
        <${Route} path="*" component=${NotFound} />
        
    </${Switch}>`;
    }
}

 

 기본적인 내용은 생략하겠습니다. path="*" 로 마지막에 정의된 라우터가 존재하지 않는 페이지들을 렌더링 하는 코드입니다.   NotFound 함수의 정의된 코드는 아래와 같습니다. 

 

import react from "react";
import htm from "htm";
import { Header } from "./header.js";

var html = htm.bind(react.createElement);

export class NotFound extends react.Component {
    render() {
        return html`<${Header} />
            <div>
                <h2>404</h2>
                <h3>Page Not Found</h3>
            </div> `;
    }
}

 

 이렇게 간단하게 설정해주시면 라우터 설정은 완료 된 것입니다.

 

 

# 웹팩 설정

---

 웹팩 설정은 devServer의 historyApiFallBack = true 을 추가하기만 하면 되겠습니다. 이 옵션은 HistoryAPI를 사용하는 SPA로 개발 시에 404가 발생하면 index.html로 이동해주는 것을 뜻합니다. BrowserRouter를 사용하고 있으시다면 아래와 같은 HistoryAPIFailback 을 이용하여 존재하지 않은 라우팅 처리를 도와줄 수 있습니다.

 

BrowserRouter

HTML5 history API를 활용하여 UI의 업데이트 처리를 도와주는 함수입니다. 해당 함수는 동적인 페이지를 생성할 때 보편적으로 사용하는 함수로써 라우팅 기능을 제공합니다.

 

 webpack.config.js 적용해야 하는 코드

 

        devServer: {
            historyApiFallback: true,
        },

 

 webpack.config.js 전체 코드

 

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackRootPlugin = require("html-webpack-root-plugin");

module.exports = function () {
    return {
        entry: "./src/frontend/index.js",
        output: {
            filename: "main.js",
            path: resolve(__dirname, "public"),
            publicPath: "/",
        },
        module: {
            rules: [
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env"],
                            plugins: ["@babel/plugin-transform-runtime"],
                        },
                    },
                },
            ],
        },
        devtool: "eval",
        devServer: {
            historyApiFallback: true,
            open: true,
        },
        optimization: {},
        plugins: [new HtmlWebpackPlugin(), new HtmlWebpackRootPlugin()],
    };
};