다음은 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 디렉터리 내에 구성 요소라는 폴더를 만듭니다.
2. 구성 요소 내부에 Home.js와 About.js라는 두 개의 파일을 만듭니다.

Home.js

import React from 'react';

const Home = () => {
  return 
Home Page
;
};

export default Home;

.js 정보

import React from 'react';

const About = () => {
  return 
About Page
;
};

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 (
    Loading...}>
        
  );
}

export default App;

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

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

npm start

5단계: 지연 로딩 테스트

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

핵심 사항

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

추가 개선 사항

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

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

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