[TECH-QA] 모달을 통해 알아보는 동적 임포트(Dynamic Import)와 지연 로딩(Lazy Loading)을 활용 및 팩토리패턴

컴포넌트 preload로 성능 개선하기

📝 버튼위에 마우스를 올려 놨을때 모달을 로딩 하는 방법

const handlerMouseEnter = () => {
  const lazyModalComponent = import('./components/ImageModal');
}

📝 최초 페이지 로드에서 중요 파일들의 로드가 완료 된후 모달 로딩

useEffect(()=> {
  const lazyModalComponent = import('./components/ImageModal');
},[])

📝 여러 컴포넌트를 프리로드 해줘야 할 경우

function lazyWidthPreload(importFunction){
  const Component = React.lazy(importFunction);
  Component.preload = importFunction;
  return Component;
}

const lazyImageModal = lazyWidthPreload(() =>  import('./components/ImageModal'));

useEffect(()=> {
  lazyImageModal.preload(); 
},[])

📝 1. lazyWidthPreload 함수

function lazyWidthPreload(importFunction) {
  const Component = React.lazy(importFunction);
  Component.preload = importFunction;
  return Component;
}

• importFunction: 동적 임포트를 위한 함수 (예: () => import('./someComponent')).
• React.lazy(importFunction): 주어진 importFunction을 사용해 컴포넌트를 지연 로딩하도록 설정합니다. 이로 인해 컴포넌트는 처음 렌더링 시 로드되지 않고, 필요할 때 비동기적으로 로드됩니다.
• Component.preload = importFunction: Component에 preload 메서드를 추가하여, 개발자가 원할 때 해당 컴포넌트를 미리 로드할 수 있도록 합니다.
• return Component: 지연 로딩 컴포넌트를 반환하며, preload 메서드가 추가된 상태입니다.

📝 2. lazyImageModal 생성

const lazyImageModal = lazyWidthPreload(() => import('./components/ImageModal'));

• 설명: lazyWidthPreload를 사용하여 ./components/ImageModal 컴포넌트를 지연 로딩하도록 설정합니다.
• 결과: lazyImageModal은 React.lazy로 생성된 지연 로딩 컴포넌트이며, 추가로 preload 메서드를 통해 ImageModal을 미리 로드할 수 있습니다.
• 장점: 초기 번들 크기를 줄이고, ImageModal이 필요할 때만 로드하여 성능을 최적화합니다.

📝 3. useEffect로 preload 호출

useEffect(() => {
  lazyImageModal.preload();
}, []);

• useEffect는 컴포넌트가 마운트된 후 실행되며, 의존성 배열 []를 사용하므로 한 번만 실행됩니다.
• lazyImageModal.preload(): ImageModal 컴포넌트를 비동기적으로 로드하여, 이후 렌더링 시 지연 없이 사용할 수 있도록 준비합니다.

정리

• 지연 로딩: React.lazy를 통해 ImageModal 컴포넌트를 초기 로드에서 제외하여 페이지 로딩 속도를 향상시킵니다. 웹 앱이 로드될 때 ImageModal은 로드되지 않음 (초기 로딩 속도 개선).
• 미리 로드: preload 메서드를 통해 필요한 시점에 컴포넌트를 미리 로드하여, 사용자가 컴포넌트를 요청할 때 대기 시간을 줄입니다. 컴포넌트 마운트 시 useEffect가 lazyImageModal.preload()를 호출하여 ImageModal을 백그라운드에서 로드.
• 성능 최적화: 초기 번들 크기를 줄이고, 필요한 컴포넌트만 로드하며, 사용자 인터랙션에 따라 동적으로 리소스를 관리합니다. 사용자가 ImageModal을 열 때, 이미 로드된 컴포넌트가 즉시 렌더링되어 부드러운 경험 제공.

Suspense

<Suspense fallback={<div>Loading...</div>}>
  <lazyImageModal />
</Suspense>

• 네트워크 상태 고려: preload는 네트워크 요청을 발생시키므로, 네트워크가 느린 환경에서는 타이밍을 조정하거나 조건부로 호출하는 것이 좋습니다.
• 의존성 배열: useEffect의 []는 한 번만 실행되도록 보장하지만, 특정 조건에 따라 preload를 호출하려면 의존성을 추가할 수 있습니다.