React Router와 Lazy Loading으로 동적 페이지 로드

//npm install react-router-dom

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

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

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

export default App;

 

//pages/Home.js

export default function Home() {
  return <h1>홈 페이지</h1>;
}

 

//pages/About.js

export default function About() {
  return <h1>소개 페이지</h1>;
}

 

 

• React Router와 Lazy Loading을 결합하면 성능과 유지보수성이 개선됨