[React] 리액트 lazy loading 적용하기(lighthouse 성능 최적화)

최종 프로젝트를 진행하던 중 리액트 lazy-loading으로 최적화 작업을 진행했다. 지연로딩(lazy-loading)이라는 것은 로딩을 바로 하지 않고 지연시켰다가 나중에 로딩하게 해준다는 뜻으로 사용자가 사이트에 접속했을 때 보이지 않는 것까지 모두 로드해오는 것이 아니라 보이는 페이지만 로드한 후 다른 페이지에 접속했을 때 그곳의 데이터를 로드해오는 작업을 해주는 것이다.

큰 React 애플리케이션은 일반적으로 많은 구성 요소와 유틸리티 메서드 및 타사 라이브러리로 구성되는데 필요할 때만 애플리케이션의 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모 단일 JavaScript 번들이 사용자에게 전송된다. 이러한 불필요한 작업이 반복되면 페이지 성능에 영향을 줄 수 있기 때문에 최적화를 시도하는 작업이 반드시 필요할 수밖에 없게 된다.

그래서 애플리케이션 최적화 방법을 알아보던 중에 React.lazy 함수를 알게 되었고 이는 Suspense 구성 요소와 결합하여 로드 상태를 처리할 수 있도록 해준다.

Suspense란?

lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 하기 때문에 Suspense 컴포넌트로 lazy 컴포넌트를 감쌌고, Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안  스피너와 같은 예비 컨텐츠를 보여줄 수 있게 해준다. fallback prop로 컴포넌트가 로드될 때까지 기다리는 동안 스피너를 적용시켜 보여줄 수 있게 하면 된다.

lazy-loading 적용방법

import React, { lazy, Suspense } from 'react';

// 기존 import방식
import Header from '../components/Header';
import Footer from '../components/Footer';

// 레이지 로딩 적용
const AudioWrite = lazy(() => import('../pages/AudioWrite'));
const Book = lazy(() => import('../pages/Book'));
const BookDetail = lazy(() => import('../pages/BookDetail'));

function App() {
  return (
    <React.Fragment className="App">
      <ConnectedRouter history={history}>
        <Header />
        <Wrap>
          <Suspense fallback={<Spinner />}>
            <Route path="/audioWrite" exact component={AudioWrite} />
            <Route path="/audioWrite/:category/:bookId" exact component={AudioWrite} />
            <Route path="/book/" exact component={Book} />
            <Route path="/book/:category" exact component={Book} />
            <Route path="/bookDetail/:category/:bookId" exact component={BookDetail} />
          </Suspense>
        </Wrap>
        <Footer/>
      </ConnectedRouter>
    </React.Fragment>
  );
}

const Wrap = styled.div`
  min-height: calc(100vh - 300px);
`

export default App;