[REACT18]React.lazy() & Suspense

React.lazy()

dynamic import로 컴포넌트를 렌더링, 초기 렌더링 지연시간 어느정도 감소

import Component from "./Component";

/* React.lazy로 dynamic import를 감쌉니다. */
const Component = React.lazy(() => import("./Component"));

React.lazy로 감싼 컴포넌트는 React.suspense 컴포넌트의 하위에서 렌더링을 해야 함

–

React.Suspense

Router로 분기가 나누어진 컴포넌트들을 lazy를 통해 import하면 해당 path로 이동할때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생김

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

/* suspense 기능을 사용하기 위해서는 import 해와야 합니다. */
import { Suspense } from "react";

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

function MyComponent() {
  return (
    <div>
      {/* React.lazy로 감싼 컴포넌트를 Suspense 컴포넌트의 하위에 렌더링 */}
      <Suspense fallback={<div>Loading...</div>}>
        {/* Suspense 컴포넌트 하위에 여러 개의 lazy 컴포넌트 렌더링 가능 */}
        <OtherComponent />
        <AnotherComponent />
      </Suspense>
    </div>
  );
}

---

웹 페이지를 불러오고 진입하는 단계인 Route에 이 두 기능을 적용시키는 것 추천

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>
);

• 라우터가 분기되는 컴포넌트에서 각 컴포넌트에 React.lazy를 사용하여 import
• 컴포넌트들을 Suspense로 감싼 후 로딩 화면으로 사용할 컴포넌트를 fallback 속성으로 설정