[React] 성능 최적화를 위한 " 코드 분할, 레이지 로딩, 리소스 관리 "

김현수·2023년 11월 12일

React

목록 보기

5/29

🖋️ 성능 최적화

🖍️ 코드 분할

애플리케이션의 번들 크기를 줄이고 필요한 코드만 로드하여 초기 로딩 시간을 단축하는 기법

동적 import 문법 사용
- React.lazy 와 함께 동적 import()를 사용하여 컴포넌트를 분할

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

function MyComponent() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <SomeComponent />
    </React.Suspense>
  );
}

라우트 기반 분할
- React Router 와 같은 라이브러리를 사용하여 라우트별로 코드를 분할 가능
- 각 페이지에 필요한 컴포넌트만 로드

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

// 라우터 내부에서 React.Suspense 사용
<Switch>
  <React.Suspense fallback={<div>Loading...</div>}>
    <Route path="/about" component={About} />
    <Route path="/" component={Home} />
  </React.Suspense>
</Switch>

🖍️ 레이지 로딩

화면에 보이는 부분만 로드 하고, 사용자가 스크롤하면서 필요한 부분을 동적으로 로드하는 기법

이미지 레이지 로딩
- loading="lazy" 속성을 사용하여 이미지 레이지 로딩을 쉽게 구현

<img src="image.jpg" loading="lazy" alt="description" />

커스텀 레이지 로딩 구현
- Intersection Observer API 를 사용하여 보이는 영역에 따라 동적으로 컴포넌트를 로드

<img class="lazy-load" data-src="path_to_image.jpg" alt="image description" />

// 특정 컴포넌트(YourComponent)가 화면에 보일 때만 렌더링
import React, { useEffect, useRef, useState } from 'react';

const LazyComponent = () => {
  const [isVisible, setIsVisible] = useState(false);
  const domRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        setIsVisible(true);
        observer.unobserve(domRef.current);
      }
    });

    observer.observe(domRef.current);

    return () => observer.disconnect();
  }, []);

  return (
    <div ref={domRef}>
      {isVisible && <YourComponent />} {/* YourComponent가 화면에 보일 때만 렌더링 */}
    </div>
  );
};