React 프로젝트에서 지연 로딩 및 코드 분할 구현에 대한 단계별 가이드

다음은 React 프로젝트에서 지연 로딩 및 코드 분할을 구현하는 방법에 대한 단계별 가이드입니다. 구성 요소를 느리게 로드하는 두 개의 경로가 있는 간단한 애플리케이션을 만들어 보겠습니다.

1단계: 새 React 앱 만들기

아직 생성하지 않았다면 Create React App을 사용하여 새 React 앱을 생성하세요.

npx create-react-app lazy-loading-example
cd lazy-loading-example

2단계: React Router 설치

라우팅을 위해 React-Router-dom을 설치합니다.

npm install react-router-dom

3단계: 지연 로딩 및 코드 분할 설정

구성요소 생성

1. src 디렉토리 안에 Components라는 폴더를 생성하세요.
2. 구성 요소 내부에서 Home.js와 About.js라는 두 개의 파일을 만듭니다.

Home.js

import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

About.js

import React from 'react';

const About = () => {
  return <h2>About Page</h2>;
};

export default About;

App.js 업데이트

이제 지연 로딩 및 라우팅을 구현하도록 App.js 파일을 수정하세요.

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// Lazy load components
const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/" component={Home} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

4단계: 애플리케이션 실행

이제 애플리케이션을 실행하여 실제로 작동하는 모습을 확인하세요.

npm start

5단계: 지연 로딩 테스트

1. 브라우저를 열고 http://localhost:3000으로 이동하세요.
2. 홈 구성 요소 로드를 보려면 "홈" 링크를 클릭하세요.
3. "정보" 링크를 클릭하면 정보 구성 요소가 느리게 로드되는 것을 볼 수 있습니다.

핵심 사항

• React.lazy는 렌더링될 때만 로드되는 구성 요소를 동적으로 가져오는 데 사용됩니다.
• Suspense는 로드 상태를 처리하는 데 사용되며, 지연 로드된 구성 요소를 가져오는 동안 폴백을 표시합니다.
• 이 접근 방식은 코드를 더 작은 덩어리로 분할하여 초기 로드 시간을 크게 줄여줍니다.

추가 개선 사항

다음을 통해 설정을 더욱 향상할 수 있습니다.

• 로딩 오류를 포착하기 위해 지연 로드된 구성 요소 주위에 오류 경계를 구현합니다.
• 대규모 애플리케이션을 위해 React Router와 함께 고급 라우팅 전략을 사용합니다.

더 구체적인 기능이나 추가 도움이 필요하면 알려주세요!

위 내용은 React 프로젝트에서 지연 로딩 및 코드 분할 구현에 대한 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!