lazy loading

ijimlnosk·2024년 8월 7일

React

목록 보기

3/7

웹 개발에서 중요한 최적화 기술 중 하나다.
이 기술은 웹사이트나 애플리케이션의 초기 로딩 시간을 줄이고 전반적인 성능을 향상시킨다.

1. 개념

lazy loading은 필요한 시점까지 리소스의 로딩을 지연시킨다.
웹페이지나 애플리케이션의 초기 로드 시 모든 내용을 한번에 불러오지 않고, 필요한 부분만 먼저 로드한다.

2. React에서의 적용 대상

React 컴포넌트: 라우팅이나 조건에 따라 컴포넌트 로딩 지연

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

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

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

3. 장점

초기 페이지 로드 시간 감소
대역폭 사용량 절약
시스템 리소스 효율적 사용
사용자 경험 개선

4. React에서의 lazy loading

React.lazy(): 동적 import를 사용해 컴포넌트를 필요할 때 로드
Suspense: lazy loading된 컴포넌트가 로드되는 동안 대체 UI 제공

import React, { Suspense } from 'react'

const TestComponent = React.lazy(() => import("./TestComponent"))

const MainComponent = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <TestComponent />
    </Suspense>
  )
}

5. React에서의 구현 방법

조건부 Lazy Loading:

jsxCopimport React, { Suspense, lazy, useState } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

const App = () => {
  const [showHeavyComponent, setShowHeavyComponent] = useState(false);

  return (
    <div>
      <button onClick={() => setShowHeavyComponent(true)}>
        Load Heavy Component
      </button>
      {showHeavyComponent && (
        <Suspense fallback={<div>Loading...</div>}>
          <HeavyComponent />
        </Suspense>
      )}
    </div>
  );
};

에러 바운더리와 함께 사용:

import React, { Suspense, lazy } from 'react';
import ErrorBoundary from './ErrorBoundary';

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

const App = () => (
  <div>
    <ErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </ErrorBoundary>
  </div>
);

6. 주의사항

SEO에 영향을 줄 수 있어서 중요 콘텐츠는 즉시 로드해야한다.
과도한 사용은 사용자 경험을 해칠 수 있다.
네트워크 상태가 좋지 않은 환경에서는 로딩 지연이 발생할 수 있다.

7. React에서의 이미지 Lazy Loading

import React, { useState, useEffect } from 'react';

const LazyImage = ({ src, alt }) => {
  const [imageSrc, setImageSrc] = useState('placeholder.jpg');

  useEffect(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => {
      setImageSrc(src);
    };
  }, [src]);

  return <img src={imageSrc} alt={alt} />;
};

const App = () => (
  <div>
    <LazyImage src="large-image.jpg" alt="Large Image" />
  </div>
);

8. React에서의 성능 측정

React DevTools의 Profiler 사용
웹 바이탈(Web Vitals) 메트릭 모니터링

import { getCLS, getFID, getLCP } from 'web-vitals';

function sendToAnalytics({ name, delta, id }) {
  // 분석 서비스로 메트릭 전송
  console.log({ name, delta, id });
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);