Lazy 로딩 React

필요할 때만 다운로드 하는 방법 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>
  );
}