[React] lazy(): 컴포넌트 지연 로딩(동적 라우팅 / 로딩 지연 완화)

📌 lazy()

: 컴포넌트를 지연 로딩(lazy loading)하기 위해 사용

• 로딩 중인 컴포넌트 코드가 처음으로 렌더링 될 때까지 연기할 수 있다.
• 기본적으로 리액트 애플리케이션은 컴포넌트를 한꺼번에 모두 로드한다.
  ➡︎ 이로 인해 초기 로딩 시간이 길어질 수 있다.
  ➡︎ 이를 해결하기 위해 React.lazy를 사용한다.
  👉 React.lazy는 동적으로 컴포넌트를 로드할 수 있다.
  👉 해당 컴포넌트가 실제로 필요할 때(렌더링할 때)까지 로드되지 않는다.
  
  
• 반드시 Suspense와 함께 사용된다.
  ✨ Suspense
  : 컴포넌트의 로딩 상태를 처리하기 위한 컴포넌트
  

  

  • 비동기 작업이 완료될 때까지 기다리는 동안 사용자에게 보여줄 UI를 결정하는 역할
  • React.lazy를 사용해 동적으로 로딩되는 컴포넌트를 감싸서, 해당 컴포넌트가 로드되기 전까지 사용자에게 대체 UI를 보여줄 수 있게 해준다.
    (정적 라우팅이면 그냥 바로 보이는데 동적 라우팅이면 lazy 라서 그 페이지에 들어갔을 때 불러오는 시간이 걸리기 때문에 불러오는 동안 Suspense를 넣는다.)
    
  • fallback 속성
    : JSX로 작성된 어떤 요소든지 넣을 수 있다.
    
    • 텍스트: <div>Loading...</div>
    • 스피너(로딩 애니메이션을 나타내는 컴포넌트): <Spinner />
    • 이미지: <img src="/loading.gif" alt="Loading..." /> 
      
      

 

const SomeComponent = lazy(() => import(해당 컴포넌트의 경로 or 파일명))

• 매개변수
  
  • load
    : import를 사용해 해당 컴포넌트를 동적으로 로드하는 함수
    
    • Promise를 반환하는 함수이며, 그 Promise는 import를 통해 컴포넌트를 비동기적으로 불러온다.
      

 

✅ 사용 

 

1. lazy 불러오기

import { lazy } from 'react';

 

 

2. import를 사용하여 해당 컴포넌트(파일명/경로)를 동적으로 로드하기 

• 다른 컴포넌트 내부에서 선언하면 안된다❌

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
const EditNote = lazy(() => import('@/pages/Notes/EditNote'));


// ❌ 잘못된 예시: 컴포넌트를 바로 넣는 것은 불가능
// const LazyComponent = React.lazy(LazyComponent);


// 🔴 잘못된 방법: 이렇게 하면 다시 렌더링할 때 모든 상태가 재설정된다.
//function Editor() {
  // const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
  // ...
// }

 

 

3. lazy 컴포넌트를 <Suspense>로 감싸기 & fallback 속성 지정

<Suspense fallback={<Loading />}>
  <h2>Preview</h2>
  <MarkdownPreview />
 </Suspense>

 

 

 

✨ router에 경로 설정 시

• 컴포넌트 명은 'Component'
• loader 함수 명은 'loader'로 사용해야 적용된다

// router.jsx
const navigation = [
  {
    text: '홈',
    path: '',
    element: <HomePage />,
  },
  {
    text: '칸반보드',
    path: '/kanbanboard',
    lazy: () => import('@/pages/KanbanBoard'),
  },
   <!-- ... -->
    ],
  },
];

// @/pages/KanbanBoard.jsx
export function Component() {
  return <div>Note List</div>;
}

 

---

 

lazy – React