필요할 때만 다운로드 하는 방법 React.lazy
/product 경로로 이동하였을 때만 다운로드한다. 하지만 다운로드 가 다 될동안 react 앱은 중단되므로
오류가 발생한다. 해결책 : 서스펜션 컴포넌트를 사용한다.
import React, { Suspense } from "react";
다운로드가 오래걸릴 경우 fallback에 정의된 JSX 코드가 실행된다.
⭐️사용장점 : 초기 코드 번들을 작게 만들 수 있음
import React, { Suspense } from "react";
import Cart from './components/Cart/Cart';
import Layout from './components/Layout/Layout';
const Products = React.lazy(()=> import('./components/Shop/Products'));
function App() {
return (
<Fragment>
<Layout>
<Suspense fallback={<p>Loading....</p>}>
<BrowserRouter>
<Routes>
<Route path="/product" element={<Products />} />
</Routes>
</BrowserRouter>
</Suspense>
</Layout>
</Fragment>
);
}