React.lazy() 와 Suspense

React.lazy() 와 Suspense는 코드분할과 지연된 컴포넌트 로딩을 간편하게 구현할 수 있습니다.
코드분할과 지연된 컴포넌트 로딩은 초기시간이 감소, 성능향상 등의 장점이 있습니다.

코드분할은 무엇일까?
React에서 코드 분할하는 방법은 dynamic import(동적 불러오기)를 사용하는 것입니다.

React 에서의 코드분할

form.addEventListener("submit", e => {
  e.preventDefault();
	/* 동적 불러오기는 이런 식으로 코드의 중간에 불러올 수 있게 됩니다. */
  import('library.moduleA')
    .then(module => module.default)
    .then(someFunction())
    .catch(handleError());
});

const someFunction = () => {
    /* moduleA를 여기서 사용합니다. */
}

이런 식으로 dynamic import를 사용하게 되면 불러온 moduleA 가 다른 곳에서 사용되지 않는 경우, 사용자가 form을 통해 양식을 제출한 경우에만 가져오도록 할 수 있습니다.

dynamic import는 then 함수를 사용해 필요한 코드만 가져옵니다. 가져온 코드에 대한 모든 호출은 해당 함수 내부에 있어야 합니다. 이 방식을 사용하면 번들링 시 분할된 코드(청크)를 지연 로딩시키거나 요청 시에 로딩할 수 있습니다.

이 dynamic import는 React.lazy 와 함께 사용할 수 있습니다.

---

React.lazy()는 동적으로 로딩되는 컴포넌트를 생성하기 위한 기능이며,
Suspense는 로딩상태를 처리하기 위한 컨테이너 역할을 합니다.

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

이렇게 React.lazy() 로 감싼 컴포넌트는 단독으로 쓰일 수는 없고, <Suspense> <Suspense/> 하위에서 렌더링을 해야 합니다.

return(
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                <MyComponent/>
            </Suspense>
        </div>
    )

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

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

Suspense 컴포넌트의 fallback prop은 컴포넌트가 로드될때까지 기다리는 동안
화면으로 보여줄 react 엘리먼트를 받아들입니다.
Suspense 컴포넌트 하나로 여러개의 lazy 컴포넌트를 보여줄 수도 있습니다.

import React, {Suspense} from "react";

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

function App(){
    return(
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                <MyComponent/>
            </Suspense>
        </div>
    )
}

 

 

 

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

라우터에 Suspense를 적용하는 것은 간단한 편입니다.
라우터가 분기되는 컴포넌트에서 각 컴포넌트에 React.lazy를 사용하여 import합니다.
그리고 Route 컴포넌트들을 Suspense로 감싼 후 로딩 화면으로 사용할 컴포넌트를 fallback 속성으로 설정해 주면 됩니다.
초기 렌더링 시간이 줄어드는 분명한 장점이 있으나 페이지를 이동하는 과정마다 로딩 화면이 보이기 때문에 서비스에 따라서 적용 여부를 결정해야 합니다.