[Next.js14 강의] 22강 - 코드 분할 및 lazy loading

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 코드 분할(Code Splitting)과 Lazy Loading의 개념과 활용 방법을 배우겠습니다. Next.js에서 코드 분할을 통해 애플리케이션의 성능을 최적화하고, Lazy Loading을 통해 사용자가 필요할 때만 특정 컴포넌트를 로드하도록 만들어 페이지 로딩 속도를 개선하는 방법을 학습합니다.

 

 

1. 코드 분할(Code Splitting)이란?

 

코드 분할의 정의

코드 분할은 애플리케이션의 전체 JavaScript 번들을 작은 청크(chunk)로 분리하는 기술입니다. 이를 통해 초기 로딩 시 불필요한 코드가 로드되는 것을 방지하고, 페이지의 로딩 속도를 최적화할 수 있습니다.

반응형

Next.js의 자동 코드 분할

Next.js는 기본적으로 각 페이지에 필요한 JavaScript 파일만 로드하는 방식으로 코드 분할을 자동으로 처리합니다. 예를 들어, about 페이지를 방문할 때 home 페이지의 코드는 로드되지 않으며, 각 페이지에 맞는 코드만 로드됩니다.

 

예제: 기본적인 코드 분할

// pages/home.js
export default function Home() {
  return <div>홈 페이지</div>;
}

// pages/about.js
export default function About() {
  return <div>소개 페이지</div>;
}

위 예시에서, home.js와 about.js는 서로 독립적인 파일로 코드가 분할되어 각각의 페이지에서만 로드됩니다.

 

 

2. 동적 임포트(Dynamic Import)

동적 임포트는 필요한 시점에 모듈을 비동기적으로 로드하는 기능입니다. 이 방식은 특정 페이지 또는 컴포넌트에서 필요한 코드를 그때그때 로드하여 초기 번들 크기를 줄이는 데 유용합니다.

 

예제: 동적 임포트 사용하기

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/MyComponent'), {
  loading: () => <p>로딩 중...</p>, // 로드되는 동안 보여줄 컴포넌트
});

export default function HomePage() {
  return (
    <div>
      <h1>홈 페이지</h1>
      <DynamicComponent />
    </div>
  );
}

· dynamic() 함수는 컴포넌트를 동적으로 임포트하여 해당 컴포넌트가 실제로 필요할 때만 로드합니다.
· 로드 중일 때 보여줄 컴포넌트를 loading 옵션을 사용하여 지정할 수 있습니다.

 

 

3. Lazy Loading(지연 로딩)이란?

728x90

Lazy Loading의 개념

Lazy Loading은 사용자가 필요할 때에만 리소스를 로드하는 기법입니다. 예를 들어, 페이지의 하단에 있는 이미지를 스크롤할 때 로드하거나, 특정 상호작용 이후에만 필요한 컴포넌트를 로드할 수 있습니다. 이 방법은 페이지 로딩 속도를 크게 개선하고, 초기 로딩 시 불필요한 리소스 로드를 방지하는 데 효과적입니다.

 

예제: React의 React.lazy와 Suspense를 활용한 Lazy Loading

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('../components/MyLazyComponent'));

export default function HomePage() {
  return (
    <div>
      <h1>홈 페이지</h1>
      <Suspense fallback={<div>로딩 중...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

 

· React.lazy(): 컴포넌트를 필요할 때 비동기적으로 로드합니다.
· Suspense: Lazy 로딩 중에 표시할 "로딩 중" 컴포넌트를 지정할 수 있는 래퍼 컴포넌트입니다.

 

 

4. 동적 임포트와 Lazy Loading의 차이점

· 동적 임포트는 특정 조건에서 컴포넌트를 비동기적으로 로드하는 방식입니다. 이는 Next.js에서 dynamic() 함수를 통해 구현됩니다.
· Lazy Loading은 React 자체의 기능으로, React.lazy()와 Suspense를 사용하여 컴포넌트를 필요할 때 로드합니다.

SMALL

이 둘은 모두 초기 로딩 성능을 최적화하는 데 유용하지만, 동적 임포트는 Next.js에 특화된 방식이고, Lazy Loading은 React의 내장 기능입니다.

 

 

5. 실전에서의 코드 분할과 Lazy Loading 활용

 

예제: 페이지 로드 시점에 따른 Lazy Loading

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
  ssr: false, // 서버사이드 렌더링 비활성화
  loading: () => <p>컴포넌트 로딩 중...</p>, // 로딩 중 표시할 컴포넌트
});

export default function HomePage() {
  return (
    <div>
      <h1>홈 페이지</h1>
      <HeavyComponent />
    </div>
  );
}

 

ssr: false: 동적 컴포넌트 로드를 클라이언트 사이드에서만 처리하여 초기 서버 사이드 렌더링 시의 성능을 개선합니다.

 

예제: 이미지 Lazy Loading

import Image from 'next/image';

export default function HomePage() {
  return (
    <div>
      <h1>홈 페이지</h1>
      <Image
        src="/images/sample.jpg"
        alt="샘플 이미지"
        width={600}
        height={400}
        loading="lazy" // 이미지 Lazy 로딩
      />
    </div>
  );
}

 

loading="lazy": 이미지를 Lazy Loading 방식으로 로드하여 페이지가 처음 로드될 때 이미지 로딩을 지연시킵니다. 이는 특히 대형 이미지나 스크롤을 통해 노출되는 이미지에 유용합니다.

 

 

6. 코드 분할과 Lazy Loading이 가져오는 이점

· 성능 향상: 초기 로딩 시 로드되는 리소스를 최소화하여 사용자가 빠르게 페이지에 접근할 수 있도록 합니다.
· 네트워크 트래픽 절감: 사용자가 필요로 하지 않는 코드는 로드되지 않으므로 불필요한 네트워크 트래픽을 줄일 수 있습니다.
· 유저 경험 개선: 페이지의 성능이 개선되면 사용자가 느끼는 인터랙션이 더 쾌적해집니다.

 

이번 강의에서는 코드 분할과 Lazy Loading을 통해 Next.js 애플리케이션의 성능을 최적화하는 방법을 배웠습니다. 동적 임포트와 Lazy Loading 기법을 적절히 활용하면 사용자 경험을 대폭 개선할 수 있으며, 특히 초기 로딩 성능을 높이는 데 큰 도움이 됩니다.

 

 

 

 

 

- 이전 수업 목록