🖋️ 성능 최적화

---

🖍️ 코드 분할

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

• 동적 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>
  );
};

🖍️ 효율적인 자원 관리

• 이미지 최적화

  
  이미지를 웹에 최적화된 형식으로 변환하고, 적절한 크기로 리사이징합니다. 필요한 경우 이미지 CDN을 사용

• 캐싱 전략

  
  브라우저 캐싱, 서비스 워커를 사용하여 자주 사용되는 리소스를 캐시

• Webpack 설정

  
  Webpack의 다양한 플러그인과 로더를 사용하여 CSS, 이미지, 폰트 파일 등을 최적화