M

MLOG

한국어

Lazy loading 및 컴포넌트 코드 분할을 통해 React 애플리케이션의 초기 로드 시간을 단축하고 성능을 개선하세요. 실용적인 기술과 모범 사례를 배울 수 있습니다.

React Lazy Loading: 최적화된 성능을 위한 컴포넌트 코드 분할

오늘날 빠르게 변화하는 디지털 세계에서 웹사이트 성능은 매우 중요합니다. 사용자는 즉각적인 만족을 기대하며, 느린 로딩 시간은 불만, 장바구니 포기, 부정적인 브랜드 이미지로 이어질 수 있습니다. React 애플리케이션의 경우, 원활하고 매력적인 사용자 경험을 제공하기 위해 성능을 최적화하는 것이 중요합니다. 이를 달성하기 위한 강력한 기술 중 하나는 컴포넌트 코드 분할을 사용한 lazy loading입니다.

Lazy Loading 및 코드 분할이란 무엇입니까?

Lazy loading은 이미지, 스크립트 및 컴포넌트와 같은 리소스를 초기 페이지 로드 중에 한 번에 모두 로드하는 대신 필요할 때만 로드하는 기술입니다. 이렇게 하면 초기에 다운로드하고 구문 분석해야 하는 데이터 양이 크게 줄어들어 초기 로드 시간이 빨라지고 인지된 성능이 향상됩니다.

코드 분할은 애플리케이션 코드를 더 작고 관리하기 쉬운 청크(또는 번들)로 나누는 프로세스입니다. 이를 통해 브라우저는 초기 보기에 필요한 코드만 다운로드하고 실제로 필요할 때까지 다른 코드의 로딩을 연기할 수 있습니다. Lazy loading은 코드 분할을 활용하여 특정 컴포넌트가 렌더링되려고 할 때만 로드합니다.

React에서 Lazy Loading 및 코드 분할을 사용하는 이유는 무엇입니까?

React 프로젝트에 lazy loading 및 코드 분할을 통합하는 것을 고려해야 하는 이유는 다음과 같습니다.

React에서 Lazy Loading을 구현하는 방법

React는 React.lazy 및 Suspense 컴포넌트를 사용하여 lazy loading을 기본적으로 지원합니다. 다음은 단계별 가이드입니다.

1. React.lazy() 사용

React.lazy()를 사용하면 컴포넌트를 동적으로 가져올 수 있으므로 코드를 별도의 청크로 효과적으로 분할할 수 있습니다. import()를 호출하는 함수를 사용하며, 이 함수는 컴포넌트로 확인되는 Promise를 반환합니다.


const MyComponent = React.lazy(() => import('./MyComponent'));

이 예에서 MyComponent는 렌더링되려고 할 때만 로드됩니다.

2. <Suspense>로 래핑

React.lazy()는 비동기적인 동적 가져오기를 사용하므로 lazy-loaded 컴포넌트를 <Suspense> 컴포넌트로 래핑해야 합니다. <Suspense> 컴포넌트를 사용하면 컴포넌트가 로드되는 동안 폴백 UI(예: 로딩 스피너)를 표시할 수 있습니다.


import React, { Suspense } from 'react';

function MyPage() {
  return (
    Loading...
}> ); }

이 예에서 MyComponent가 로드되는 동안 Loading... 메시지가 표시됩니다. 컴포넌트가 로드되면 폴백 UI를 대체합니다.

3. 실용적인 예: 대용량 이미지 갤러리 Lazy Loading

대용량 이미지 갤러리가 있는 시나리오를 고려해 보겠습니다. 모든 이미지를 한 번에 로드하면 성능에 큰 영향을 미칠 수 있습니다. 다음은 React.lazy() 및 <Suspense>를 사용하여 이미지를 lazy loading하는 방법입니다.


import React, { Suspense } from 'react';

const LazyImage = React.lazy(() => import('./Image'));

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Image 1' },
    { id: 2, src: 'image2.jpg', alt: 'Image 2' },
    { id: 3, src: 'image3.jpg', alt: 'Image 3' },
    // ... more images
  ];

  return (
    

      {images.map(image => (
        Loading image...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

그리고 Image.js 컴포넌트:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

이 예에서 각 이미지는 <Suspense> 컴포넌트로 래핑되므로 각 이미지가 로드되는 동안 로딩 메시지가 표시됩니다. 이렇게 하면 이미지가 다운로드되는 동안 전체 페이지가 차단되는 것을 방지할 수 있습니다.

고급 기술 및 고려 사항

1. 오류 경계

Lazy loading을 사용할 때는 로딩 프로세스 중에 발생할 수 있는 잠재적인 오류를 처리하는 것이 중요합니다. 오류 경계를 사용하여 이러한 오류를 포착하고 폴백 UI를 표시할 수 있습니다. 다음과 같이 오류 경계 컴포넌트를 만들 수 있습니다.


import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

그런 다음 <Suspense> 컴포넌트를 <ErrorBoundary>로 래핑합니다.



  Loading...}>

MyComponent를 로드하는 동안 오류가 발생하면 <ErrorBoundary>가 이를 포착하고 폴백 UI를 표시합니다.

2. 서버측 렌더링(SSR) 및 Lazy Loading

Lazy loading은 서버측 렌더링(SSR)과 함께 사용하여 애플리케이션의 초기 로드 시간을 개선할 수도 있습니다. 그러나 몇 가지 추가 구성이 필요합니다. 서버가 동적 가져오기를 올바르게 처리하고 lazy-loaded 컴포넌트가 클라이언트측에서 적절하게 하이드레이션되도록 해야 합니다.

Next.js 및 Gatsby.js와 같은 도구는 SSR 환경에서 lazy loading 및 코드 분할을 기본적으로 지원하므로 프로세스가 훨씬 쉬워집니다.

3. Lazy-Loaded 컴포넌트 미리 로드

경우에 따라 실제로 필요하기 전에 lazy-loaded 컴포넌트를 미리 로드할 수 있습니다. 이는 곧 렌더링될 가능성이 있는 컴포넌트(예: 폴드 아래에 있지만 스크롤되어 볼 수 있을 가능성이 있는 컴포넌트)에 유용할 수 있습니다. import() 함수를 수동으로 호출하여 컴포넌트를 미리 로드할 수 있습니다.


import('./MyComponent'); // MyComponent 미리 로드

이렇게 하면 백그라운드에서 컴포넌트 로딩이 시작되므로 실제로 렌더링될 때 더 빨리 사용할 수 있습니다.

4. Webpack Magic Comments를 사용한 동적 가져오기

Webpack의 "magic comments"는 생성된 코드 청크의 이름을 사용자 정의하는 방법을 제공합니다. 이는 애플리케이션의 번들 구조를 디버깅하고 분석하는 데 유용할 수 있습니다. 예를 들면 다음과 같습니다.


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

이렇게 하면 일반적인 이름 대신 "my-component.js"(또는 유사한)라는 코드 청크가 생성됩니다.

5. 일반적인 함정 피하기

실제 사례 및 사용 사례

Lazy loading은 React 애플리케이션의 성능을 개선하기 위해 광범위한 시나리오에 적용할 수 있습니다. 다음은 몇 가지 예입니다.

예: 국제 전자 상거래 웹사이트

전 세계에 제품을 판매하는 전자 상거래 웹사이트를 상상해 보십시오. 국가마다 통화, 언어 및 제품 카탈로그가 다를 수 있습니다. 모든 국가의 데이터를 미리 로드하는 대신 lazy loading을 사용하여 사용자가 사이트를 방문할 때만 사용자 위치와 관련된 데이터를 로드할 수 있습니다.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // 사용자의 국가를 결정하는 함수

  return (
    Loading content for your region...}>
      
      
    
  );
}

결론

Lazy loading 및 컴포넌트 코드 분할은 React 애플리케이션의 성능을 최적화하기 위한 강력한 기술입니다. 컴포넌트를 필요할 때만 로드하면 초기 로드 시간을 크게 줄이고 사용자 경험을 개선하며 SEO를 향상시킬 수 있습니다. React의 기본 제공 React.lazy() 및 <Suspense> 컴포넌트를 사용하면 프로젝트에서 lazy loading을 쉽게 구현할 수 있습니다. 이러한 기술을 사용하여 전 세계 사용자를 위한 더 빠르고 응답성이 뛰어나고 매력적인 웹 애플리케이션을 구축하십시오.

lazy loading을 구현할 때는 항상 사용자 경험을 고려하십시오. 유용한 폴백 UI를 제공하고 잠재적인 오류를 정상적으로 처리하고 애플리케이션 성능을 신중하게 분석하여 원하는 결과를 얻고 있는지 확인하십시오. 다양한 접근 방식을 실험하고 특정 요구 사항에 가장 적합한 솔루션을 찾는 것을 두려워하지 마십시오.