[React.js] 지연 로딩(Lazy Loading)

지연 로딩(Lazy Loading)

들어가며

• 리액트(React.js)에서 애플리케이션을 배포하기 전에 코드 최적화 작업을 해주어야 하는데, 이때 지연 로딩(Lazy Loading)을 활용할 수 있다.
• 지연 로딩(Lazy Loading)이 무엇인지 간단히 정리해본다.

 

지연 로딩(Lazy Loading)

개념

• 필요한 시점에 특정 컴포넌트나 모듈을 로드하여 초기 로딩 시간을 줄이고 애플리케이션의 성능을 향상시키는 기술
• 이 방법을 사용하면 초기 로딩 시 불필요한 코드가 로드되지 않으며, 사용자 경험을 개선할 수 있다. 

 

기본적인 사용 방법

• @React.lazy@와 @Suspense@를 사용하면 컴포넌트를 동적으로 @import@하고 로딩이 완료될 때까지 대체 UI(fallback)를 표시할 수 있다.

 

① 컴포넌트 동적 import

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

 

② Suspense로 감싸기

• 동적으로 로딩된 컴포넌트를 @Suspense@로 감싸서 로딩되는 동안 대체 UI를 표시한다.

import React, { Suspense } from 'react';

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

export default App;

 

데이터 로더 지연 로딩

• 동적으로 @import@된 컴포넌트와 함께 데이터 로더(Data Loader)도 지연 로딩시킬 수 있다.
• 예를 들어, 리액트 라우터(React Router)를 사용하는 경우 로더 함수도 동적으로 로드할 수 있다.

 

컴포넌트와 로더 동적 import

const BlogPage = React.lazy(() => import('./BlogPage'));
const blogLoader = () => import('./blogLoader').then(module => module.default);

 

리액트 라우터에서 사용

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

function App() {
  return (
    <Router>
      <Routes>
        <Route
          path="/blog"
          element={
            <Suspense fallback={<div>Loading...</div>}>
              <BlogPage />
            </Suspense>
          }
          loader={blogLoader}
        />
      </Routes>
    </Router>
  );
}

export default App;

 

지연 로딩 사용 시 장점

• 초기 로딩 시간 감소: 처음 애플리케이션이 로드될 때 필요한 최소한의 코드만 로드되어 초기 로딩 시간이 줄어든다.
• 리소스 최적화: 사용자가 특정 페이지나 기능을 실제로 사용할 때만 해당 코드를 로드하여 불필요한 리소스 사용을 줄인다.
• 유연성: 대규모 애플리케이션에서 코드 분할을 통해 유지 보수성과 확장성을 높인다.

 

사용 시 주의 사항

• 네트워크 지연
  • 컴포넌트를 동적으로 로드할 때 네트워크 지연이 발생할 수 있다.
  • 이로 인해 사용자 경험이 저하될 수 있으므로 적절한 대체 UI를 제공해야 한다.
• 코드 분할 전략
  • 모든 컴포넌트를 무조건 지연 로딩하는 것은 바람직하지 않다.
  • 주요 기능이나 자주 사용되는 컴포넌트는 초기 로딩 시 로드하는 것이 좋다.

 

참고 사이트

lazy – React

lazy v6.24.1 | React Router