React.lazy()

• React.lazy 함수를 사용해 컴포넌트를 동적으로 import(dynamic import)할 수 있다.
• 이를 사용해 초기 렌더링 지연시간을 어느정도 줄일 수 있다.
• React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수는 없고, React.suspense 컴포넌트의 하위에서 렌더링을 해야 한다.

import Component from './Component';

const Component = React.lazy(() => import('./Component'));

• React.lazy로 dynamic import를 감싼다.

---

React.Suspense

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

• React.lazy를 사용해 동적으로 import 해오는 컴포넌트들을 <Suspense>컴포넌트로 감싸준다. (부모 요소가 되는 것)
• Suspense의 fallback 속성은 로딩 화면으로 보여줄 리액트 요소를 값으로 둔다.
• Suspense 컴포넌트 하나로 여러 개의 lazy 컴포넌트를 보여줄 수도 있다.

import { Suspense } from 'react'; // Suspense 불러오기

const OtherComponent = React.lazy(() => import('./OtherComponent')); // React.lazy를 사용해 동적으로 import 해오는 컴포넌트
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}> // fallback 속성의 값은 로딩 시 보여줄 요소
        <OtherComponent />
		<AnotherComponent />
      </Suspense>
    </div>
  );
}

• OtherComponent, AnotherComponent를 <Suspense>컴포넌트로 감싸준다.

---

React.lazy와 Suspense의 적용

• 앱에 코드 분할을 도입할 곳을 결정하는 것은 사실 까다로움...
• 보통 (중간에 적용시키는 것보다는) 웹 페이지를 불러오고 진입하는 단계인 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>
);

1) 라우터가 분기되는 각 컴포넌트를 React.lazy를 사용하여 import한다.
2) 이 Route 컴포넌트들을 Suspense로 감싸고
3) 로딩 화면으로 사용할 컴포넌트를 Suspense의 fallback 속성으로 설정해준다.