React Router 지연 로딩과 관련된 주요 문제는 올바르게 구현되지 않으면 성능 문제가 발생할 수 있다는 것입니다. 지연 로딩은 각 구성 요소의 코드를 개별적으로 로드해야 하므로 초기 페이지 로드 시간을 증가시킬 수 있습니다. 또한 구성 요소를 자주 사용하지 않으면 전혀 로드되지 않아 리소스가 낭비될 수 있습니다. 마지막으로, 지연 로딩을 지원하지 않는 이전 브라우저와의 잠재적인 호환성 문제가 있습니다.
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router> ); } export default App;
1. 'react'에서 React, { Suspense } 가져오기;
// 이 줄은 React 라이브러리와 React 라이브러리에서 Suspense 구성 요소를 가져옵니다.
2. 'react-router-dom'에서 { BrowserRouter as Router, Route, Switch } 가져오기;
// 이 줄은 react-router-dom 라이브러리에서 BrowserRouter, Route 및 Switch 구성 요소를 가져옵니다.
3. const Home = React.lazy(() => import('./Home'));
// 이 줄은 React의 지연 로딩 기능을 사용하여 이 파일(앱 구성 요소)과 동일한 디렉토리에 있는 파일에서 Home이라는 구성 요소를 동적으로 가져오는 Home이라는 상수를 만듭니다.
4. const About = React.lazy(() => import('./About'));
// 이 줄은 이 파일(App 구성 요소)과 같은 디렉터리에 있는 파일에서 About라는 구성 요소를 동적으로 가져오기 위해 지연 로딩을 사용하는 About이라는 상수를 만듭니다.
const Contact = React.lazy(() => import('./Contact')); // 이 줄은 이 파일(App 구성 요소)과 같은 디렉터리에 있는 파일에서 Contact라는 구성 요소를 동적으로 가져오기 위해 지연 로드를 사용하는 Contact라는 상수를 만듭니다.
5. 함수 앱() { 반환(
6.
