🔍 React.lazy() & Suspense

👀 React.lazy()

React에서 React.lazy 함수를 사용하면 dynamic import를 사용해 컴포넌트를 렌더링할 수 있다.

즉, React.lazy를 통해 컴포넌트를 동적으로 import를 할 수 있기 때문에, React 앱의 초기 렌더링 지연시간을 어느정도 줄일 수 있다.

import SomeComponent from './SomeComponent';

/* React.lazy로 dynamic import를 감싼다. */
const SomeComponent = React.lazy(() => import('./SomeComponent'));

위와 같이 React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수는 없고, React.suspense 컴포넌트의 하위에서 렌더링 되어야 하며, Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해준다.

👀 React.Suspense()

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

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

/* 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>
  );
}

Supense 컴포넌트의 fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 로딩 화면으로 보여줄 React 엘리먼트를 받아들인다.

또한, Suspense 컴포넌트는 위와 같이 lazy 컴포넌트를 감싸며, 하나의 Suspense 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있다.

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

위와 같이 Router가 분기되는 컴포넌트에서 각 컴포넌트를 React.lazy를 사용해 감싸주고 import한 뒤,

Route 컴포넌트들을 Suspense 로 감싼 후 로딩 화면으로 사용할 컴포넌트를 fallback 속성으로 설정한다.

이럴 경우, 초기 렌더링 시간은 줄어들지만 페이지를 이동할때 마다 로딩 화면이 보여지기 때문에 서비스에 따라서 적용 여부를 결정해야 한다.

Reference:

코드스테이츠

https://ko.reactjs.org/docs/code-splitting.html#reactlazy

https://ko.reactjs.org/docs/react-api.html#reactsuspense