사용되는 코드는 인프런 React v16 강의를 들으며 React v18로 혼자 바꾼 코드입니다.
강의에서는 코드 스플리팅을 구현할 때 @loadable/component 를 사용하는데 React v18로 바뀐 지금은 react에서 지원하는 내장 컴포넌트와 함수를 사용합니다.

코드 스플리팅이란

리액트는 싱글페이지 APP이라 웹사이트가 커지면서 페이지가 수백 페이지가 되었을 때 빌드 시 하나의 자바스크립트 파일로 만든다면 용량이 엄청나게 커진다.
용량이 커지면 페이지 로딩 시간이 커지는데 그러면 사용자는 좋지 않은 서비스를 경험할 수 있다.
그래서 필요한 페이지만 불러오도록 하기 위해 코드 스플리팅이란 기법을 사용한다.

코드 스플리팅이란 필요없는 컴포넌트는 처음에 불러오지 않도록 필요한 컴포넌트는 필요한 시점마다 불러오도록 하는 기법이다.

React.js에서 사용하기

React.lazy

컴포넌트를 선언할 때 렌더링하는 시점에 비동기적으로 로딩할 수 있게 도와주는 함수이다.

Suspense

React 내장 컴포넌트로 코드 스플리팅된 컴포넌트를 로딩하고, 로딩이 끝나지 않았을 때 대체할 수 있는 UI를 설정할 수 있다.

적용

import React, { Suspense } from "react";
import { Route, Routes, Navigate } from 'react-router-dom'

const Login = React.lazy(() => import('@pages/Login'))
const Signup = React.lazy(() => import('@pages/Signup'))

const App = () => {
    return <Routes>
        <Route path="/" element={ <Navigate replace to='/login'/> } />
        <Route 
            path="/login" 
            element={ 
                <Suspense 
                    fallback={<div>Loading...</div>}
                >
                    <Login />
                </Suspense> 
            } />
        <Route 
            path="/signup" 
            element={ 
                <Suspense 
                    fallback={<div>Loading...</div>}
                >
                    <Signup />
                </Suspense> 
            } />
    </Routes>
    
}

export default App