React.lazy() & React.Suspense

React.lazy()

import Component from './Component';

const Component = React.lazy(() => import('./Component'));

React.Suspense

렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고,
로딩이 완료되면 렌더링이 준비된 컴포넌트를 보여주는 기능

import { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
		<AnotherComponent />
      </Suspense>
    </div>
  );
}

최종

import { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

✅ 페이지를 이동하는 과정마다 로딩 화면이 나타남