React.lazy와 Suspense를 사용한 코드 분할

현대 웹 개발에서는 성능이 무엇보다 중요합니다. 사용자는 빠른 로딩 애플리케이션을 기대하며 이를 달성하기 위한 가장 효과적인 전략 중 하나는 코드 분할을 통한 것입니다. 코드 분할을 사용하면 애플리케이션을 더 작은 덩어리로 나누어 필요할 때 필요한 코드만 로드할 수 있습니다. 이 글에서는 React.lazy와 Suspense를 사용하여 React에서 코드 분할을 구현하는 방법을 살펴봅니다.

코드 분할 이해

코드 분할은 애플리케이션을 요청 시 로드할 수 있는 더 작은 번들로 나누는 프로세스입니다. 이는 하나의 대규모 JavaScript 번들을 제공하면 로드 시간이 느려지고 사용자 경험이 저하될 수 있는 대규모 애플리케이션에 특히 중요합니다. 코드를 분할하면 사용자가 필요할 때 필요한 코드만 다운로드하도록 할 수 있습니다.

번들링의 역할

대부분의 React 애플리케이션은 Webpack, Rollup 또는 Browserify와 같은 번들러를 사용하여 파일을 단일 번들로 결합합니다. 번들링은 효율적이지만 애플리케이션이 커짐에 따라 파일 크기가 커질 수 있습니다. 코드 분할은 애플리케이션에서 필요한 부분만 로드할 수 있도록 하여 이 문제를 완화하는 데 도움이 됩니다.

동적 가져오기

동적 import() 구문은 JavaScript 코드 분할의 기초입니다. 이를 통해 모듈을 비동기식으로 로드할 수 있으며 이는 React에서 코드 분할을 구현하는 데 중요합니다.

// Before code splitting
import { add } from './math';

console.log(add(16, 26));

// After code splitting
import("./math").then(math => {
  console.log(math.add(16, 26));
});

import()를 사용하면 번들러는 가져온 모듈에 대해 별도의 청크를 자동으로 생성합니다.

React.lazy 사용

React는 React.lazy를 통해 구성요소 수준에서 코드 분할을 구현하는 내장된 방법을 제공합니다. 이 기능을 사용하면 동적으로 로드될 구성요소를 정의할 수 있습니다.

예:

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
);

이 예에서 AvatarComponent는 DetailsComponent가 렌더링될 때만 로드되므로 초기 로드 시간이 줄어듭니다.

서스펜스 소개

React.lazy는 구성요소 로딩을 처리하지만 로딩 상태를 관리하지는 않습니다. Suspense를 사용하면 지연 로드 구성 요소를 가져오는 동안 표시될 대체 UI를 정의할 수 있습니다.

예:

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

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading...</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
);

이 예에서는 AvatarComponent가 로드되는 동안 사용자에게 "로드 중..." 메시지가 표시됩니다. 이는 로딩 과정에서 피드백을 제공하여 사용자 경험을 향상시킵니다.

여러 구성 요소 처리

Suspense는 지연 로드된 여러 구성 요소를 동시에 관리할 수도 있습니다. 이는 사용자에게 표시되는 로딩 표시 수를 줄이는 데 유용합니다.

예:

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

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));

const renderLoader = () => <p>Loading...</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
    <InfoComponent />
  </Suspense>
);

이 경우 두 구성 요소가 함께 로드되며 두 구성 요소가 모두 준비될 때까지 사용자에게 단일 로딩 표시기가 표시됩니다.

오류 경계

지연 로드 구성 요소를 처리할 때는 잠재적인 로드 오류를 처리하는 것이 중요합니다. React는 오류 경계를 통해 이에 대한 패턴을 제공합니다. 오류 경계는 렌더링 중에 오류를 포착하고 대체 UI를 표시할 수 있습니다.

예:

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

const AvatarComponent = lazy(() => import('./AvatarComponent'));

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <p>Loading failed! Please reload.</p>;
    }
    return this.props.children;
  }
}

const DetailsComponent = () => (
  <ErrorBoundary>
    <Suspense fallback={<p>Loading...</p>}>
      <AvatarComponent />
    </Suspense>
  </ErrorBoundary>
);

이 예에서 AvatarComponent가 로드되지 않으면 사용자에게 손상된 UI 대신 친숙한 오류 메시지가 표시됩니다.

경로 기반 코드 분할

코드 분할을 구현하는 가장 효과적인 장소 중 하나는 경로 수준입니다. 이는 다양한 경로가 다양한 구성요소를 로드할 수 있는 단일 페이지 애플리케이션(SPA)에 특히 유용합니다.

예:

import React, { 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>
);

이 예에서 Home 및 About 구성 요소는 해당 경로에 액세스할 때만 로드되어 초기 로드 시간을 최적화합니다.

결론

코드 분할은 React 애플리케이션의 성능을 크게 향상시킬 수 있는 강력한 기술입니다. React.lazy 및 Suspense를 사용하면 구성 요소 수준에서 코드 분할을 쉽게 구현할 수 있으므로 사용자는 필요한 코드만 다운로드할 수 있습니다. 이는 로드 시간을 향상시킬 뿐만 아니라 전반적인 사용자 경험도 향상시킵니다.

React 애플리케이션을 개발할 때 코드 분할을 적용하여 성능을 최적화할 수 있는 위치를 고려하세요. 경로 기반 분할로 시작하여 필요에 따라 로드할 수 있는 대형 구성 요소를 식별합니다. 이러한 전략을 사용하면 사용자를 만족시키는 빠르고 효율적인 애플리케이션을 만들 수 있습니다.

React, TypeScript 및 최신 웹 개발 방식에 대한 더 많은 통찰력을 얻으려면 저를 팔로우하세요!?‍?

위 내용은 React.lazy와 Suspense를 사용한 코드 분할의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!