지연 로딩 구성 요소로 React 앱 성능 향상

React의 지연 로딩 구성 요소

지연 로딩은 필요할 때만 구성요소를 로드할 수 있게 해주는 React의 기술입니다. 처음에는 앱의 필수 부분만 로드되고 나머지 부분은 필요할 때 동적으로 로드되므로 초기 로드 시간을 줄여 애플리케이션 성능을 향상시키는 데 도움이 됩니다.

React는 지연 로딩을 구현하기 위해 React.lazy 함수와 Suspense 컴포넌트를 제공합니다.

지연 로딩의 작동 방식

1. React.lazy: 구성 요소를 동적으로 가져옵니다.
2. Suspense: 구성요소가 로드되는 동안 폴백(예: 로딩 스피너)을 표시합니다.

통사론

const LazyComponent = React.lazy(() => import('./path/to/Component'));

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

• React.lazy: 지정된 구성 요소를 동적으로 가져옵니다.
• 서스펜스: 지연 로드된 구성 요소를 래핑하고 구성 요소가 로드되는 동안 대체 UI를 제공합니다.

예제 1: 기본 지연 로딩

지연 로딩 없이

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

이 예에서는 HeavyComponent가 즉시 필요하지 않더라도 항상 로드되므로 초기 로드 시간이 늘어납니다.

지연 로딩 사용

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <Suspense fallback={<div>Loading Heavy Component...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

이제 HeavyComponent는 렌더링될 때만 로드됩니다. 구성 요소를 가져오는 동안 대체 UI(예: "무거운 구성 요소 로드 중...")가 표시됩니다.

예 2: React Router를 사용한 지연 로딩

지연 로딩은 특정 경로에 액세스할 때만 특정 경로의 구성요소를 로드하도록 라우팅하는 데 특히 유용합니다.

import React, { Suspense } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const Home = React.lazy(() => import("./Home"));
const About = React.lazy(() => import("./About"));
const Contact = React.lazy(() => import("./Contact"));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading Page...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

• React.lazy: /about 및 /contact와 같은 경로에 대한 구성 요소를 지연 로드합니다.
• Suspense: 구성 요소가 로드되는 동안 대체 UI를 표시합니다.

지연 로딩의 이점

1. 성능 향상: 불필요한 구성 요소의 로딩을 지연시켜 초기 로딩 시간을 단축합니다.
2. 더 나은 사용자 경험: 구성 요소를 동적으로 로드하여 반응형 앱을 만드는 데 도움이 됩니다.
3. 번들 크기 감소: 코드를 더 작은 덩어리로 분할하여 처음에 로드되는 JavaScript 번들의 크기를 최소화합니다.

고급 예: 여러 구성요소 지연 로딩

여러 구성요소를 지연 로드하고 조건부 렌더링으로 결합할 수 있습니다.

const LazyComponent = React.lazy(() => import('./path/to/Component'));

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

지연 로딩을 통한 오류 처리

지연 로딩 구성 요소가 로드에 실패하는 경우(예: 네트워크 오류) React는 지연 로딩에 대한 기본 오류 처리 기능을 제공하지 않습니다. ErrorBoundary를 사용하여 이러한 시나리오를 처리할 수 있습니다.

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

지연 로딩 모범 사례

1. 폴백을 단순하게 유지하세요: 스피너나 문자 메시지와 같은 가벼운 폴백 UI를 사용하세요.
2. 현명하게 구성요소 청크: 경로나 기능 등을 기준으로 구성요소를 논리적으로 분할합니다.
3. 코드 분할과 결합: 효과적인 코드 분할을 위해 Webpack 또는 Vite와 같은 도구를 사용하세요.

결론

React의 지연 로딩은 애플리케이션 성능을 향상하고 사용자 경험을 최적화하는 강력한 방법입니다. React.lazy 및 Suspense를 사용하여 구성 요소를 동적으로 로드하면 초기 로드 시간을 줄이고 애플리케이션에서 필요한 부분만 가져오도록 할 수 있습니다.

위 내용은 지연 로딩 구성 요소로 React 앱 성능 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!