React.lazy(), Suspense

지난주에 이 개념에 대하여 학습을 진행하였는데, 자주 사용할 수 있을 것 같은 내용이라 블로깅을 해야겠다고 마음을 먹었다. 그러나 미루고 또 미루어 결국 약 5일 뒤에 진행하게 되었다. 날씨가 더워서 그런가 사람이 게을러지고 있다. 그래도 프로젝트 기간이 좀 있으면 다가오는데, 그전까지 열심히 내공을 쌓아 프로젝트에 발사할 수 있었으면 좋겠다.

React.lazy()

리액트에서 하나의 컴포넌트를 랜더링 할 때에 보통은 import문을 코드의 맨 앞에 사용하여 미리 다운받아둔 후 사용한다. 그러나 그러면 사용 안 할수도 있는 컴포넌트들을 다운 받게되는 치명적인 단점이 있다. 이 때에 React.lazy()를 사용하여 해당 컴포넌트를 사용할 때에 해당 컴포넌트의 코드를 다운하여 사용하는 것이다. 이 경우에는 페이지 전환 시에 렌더링이 조금 느려질 수도 있지만, 처음 접속 할 때 React.lazy()로 처리한 컴포넌트의 코드를 가져오지 않으므로 렌더링 속도가 빨라진다.

/* React.lazy로 dynamic import를 감쌉니다. */
const Component = React.lazy(() => import('./Component'));

Suspense

Suspense를 사용하는 이유는 React.lazy()가 컴포넌트를 가져오는데 시간이 걸리는 데에 이때 잠깐 출력해줄 로딩 화면을 만들기 위해 사용하는 것이다. 사용법은 간단한다. Suspense의 속성값으로 로딩시에 출력할 html을 fallback에 넣어주면 된다.

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

Router와 React.lazy()

React.lazy()는 또 너무 많이 사용하면 화면 전환이 될 때마다 너무 많은 시간이 소요될 수 있기 때문에 주로 페이지가 전환이 되는 Router와 함께 사용한다.

/*lazy도 리액트로부터 가지고 와 React.lazy 대신 lazy 로 사용할 수 있다.*/
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>
);