React.lazy()

React는 SPA(Single-Page-Application)이므로 사용하지 않는 컴포넌트까지 한번에 불러오는 단점이 있다. React.lazy()를 사용하면 컴포넌트를 동적으로 import할 수 있기 때문에 초기 렌더링 시간을 줄 일 수 있다.
단, React.lazy()를 적용한 컴포넌트는 Suspence컴포넌트의 하위에 위치해야 한다.

Suspence

Router로 분기가 나누어진 컴포넌트들을 lazy를 통해 import하면 해당 path로 이동할때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생기게 된다. 이 때, Suspence는 로딩화면을 보여주고, 로딩이 완료 되면 컴포넌트를 보여준다.

• fallback속성을 갖고 속성값은 로딩시 보여줄 컴포넌트이다.

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={<Loading />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);