[React] React.lazy()란?

[React.lazy란?]

React에서 컴포넌트 파일을 코드의 최상단에 import로 정의하고 동적으로 불러오기를 사용하면 에러가 발생합니다. 따라서 컴포넌트를 동적으로 불러오기 위해서는 React.lazy()를 사용해야 합니다. React.lazy() 메서드를 사용하면 동적 가져오기를 사용하여 구성 요소 수준에서 React 애플리케이션을 쉽게 코드 분할할 수 있습니다.

 

 

[React.lazy를 사용하는 이유]

일반적으로 규모가 큰 React 애플리케이션은 많은 요소, 라이브러리 등으로 구성됩니다. 필요할 때만 애플리케이션의 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모 단일 Javascript 번들이 사용자에게 전송됩니다. 이는 페이지 성능에 상당한 영향을 줄 수 있습니다. React.lazy() 메서드 요소들을 손쉽게 개별 Javascript 청크로 분리하는 기본 제공 방법을 제공합니다. 

 

 

[사용법 및 예제]

아래 코드는 React.lazy를 사용한 아주 간단한 예제 코드입니다. 예제 코드를 보면서 하나하나 살펴보도록 하겠습니다.

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  const About = React.lazy(() => import('./About'));

  return (
   <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element=<About/>} />
      </Routes>
    </Suspense>
  </Router>
  );
}

 

#1. React.lazy()

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

React.lazy()는 import() 구문을 반환하는 콜백 함수를 인자로 받습니다.

동적으로 불러오는 컴포넌트 파일에는 반드시 지켜줘야하는 두 가지 규칙이 있습니다.

 

1. React 컴포넌트를 포함해야 합니다.

2. default export를 가진 컴포넌트여야 합니다.

 

#2. <Suspense />

Suspense는 비동기로 데이터 가져오기와 코드 스플리팅을 더욱 간단하게 처리하고, 사용자 경험을 개선하기 위한 목적으로 도입된 기능입니다. Suspense는 React v16.6 이상부터 사용 가능하며, 다음과 같은 주요 목적을 가지고 있습니다.

 

1. 비동기 데이터 가져오기

Suspense를 사용하면 컴포넌트에서 비동기 작업을 수행하거나 외부 데이터를 가져오는 동안 화면에 로딩 상태를 표시할 수 있습니다. 이로써 사용자 경험을 향상시킬 수 있습니다.

2. 코드 스플리팅

Suspense는 코드 스플리팅과 함께 사용하여 앱 번들의 크기를 줄이고 초기 로딩시간을 최적화할 수 있습니다. 필요한 컴포넌트만 로드하고 사용자가 해당 컴포넌트를 요청할 때까지 다른 컴포넌트를 로드하지 않도록 합니다.

 

<Suspense fallback={<div>Loading...</div>}>
  <Routes>
    <Route path="/" element=<About/>} />
  </Routes>
</Suspense>

fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 렌더링하려는 React 엘리먼트를 받아들입니다. Suspense 컴포넌트는 lazy 컴포넌트를 감쌉니다. 하나의 Suspense 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다. lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 하며, Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 콘텐츠를 보여줄 수 있게 해 줍니다. 

 

#3. React Router와 함께 사용

return (
   <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element=<About/>} />
      </Routes>
    </Suspense>
  </Router>
);

React.lazy()는 React 공식문서에 따르면, Router 바로 아래에 Suspense를 위치시키고, Route로 보여줄 컴포넌트들을 React.lazy로 불러오는 것을 권장하고 있습니다.

 

 

 

 

References

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