lazy

 

🎯 lazy란 무엇인가요?

React의 **lazy**는 필요할 때만 컴포넌트를 불러오는 기능이에요.
쉽게 말해, 컴포넌트를 게으르게(lazily) 불러오기 때문에 화면에 보여줄 준비가 될 때만 로딩합니다.

 

 

🍕 비유로 이해하기: 햄버거 가게 이야기

여러분이 햄버거 가게를 운영한다고 생각해 보세요. 🍔

1. 모든 메뉴를 한 번에 준비하면?
   • 손님이 언제 어떤 메뉴를 주문할지 몰라서 모든 햄버거를 미리 만들어둔다고 가정해요.
   • 그러면 냉장고에 햄버거가 쌓이고, 재료 낭비도 많아지겠죠?
2. lazy를 사용하면?
   • 손님이 특정 메뉴를 주문할 때만 햄버거를 바로 만들어서 제공해요.
   • 이렇게 하면 불필요한 낭비 없이 빠르고 효율적으로 제공할 수 있어요.

React의 **lazy**도 똑같아요!
모든 컴포넌트를 한 번에 불러오는 대신, 필요할 때만 가져와서 성능을 최적화해줍니다.

 

🛠️ React에서 lazy 사용법

React에서 **lazy**는 React.lazy() 함수를 사용해서 컴포넌트를 동적으로 불러옵니다.
주로 **코드 분할(Code Splitting)**을 위해 사용해요.

 

1. 기본 사용법: 컴포넌트를 lazy하게 불러오기

예를 들어, MyComponent라는 컴포넌트를 동적으로 불러와 볼게요.

파일 구조

src/
  ├── components/
  │     └── MyComponent.jsx
  ├── App.jsx

 

MyComponent.jsx (불러올 컴포넌트)

import React from 'react';

export default function MyComponent() {
  return <h1>안녕하세요! 저는 Lazy Component입니다 😊</h1>;
}

 

App.jsx (lazy 사용)

import React, { Suspense, lazy } from 'react';

// lazy를 사용해 MyComponent를 동적으로 불러오기
const MyComponent = lazy(() => import('./components/MyComponent'));

function App() {
  return (
    <div>
      <h1>React lazy 예제</h1>
      <Suspense fallback={<p>로딩 중...</p>}>
        <MyComponent /> {/* MyComponent를 필요할 때만 불러옴 */}
      </Suspense>
    </div>
  );
}

export default App;

 

🔍 코드 설명

1. React.lazy()
   • React.lazy()를 사용해 컴포넌트를 동적으로 가져옵니다.
   • 여기서 **import('./components/MyComponent')**는 실제로 컴포넌트를 가져오는 코드예요.
2. Suspense 컴포넌트
   • Suspense는 lazy 컴포넌트가 로딩될 때 보여줄 화면을 설정합니다.
   • fallback 속성으로 로딩 중에 보여줄 UI를 설정할 수 있어요.
   • 예를 들어 <p>로딩 중...</p>를 표시해줍니다.
3. MyComponent의 로딩
   • App 컴포넌트가 처음 렌더링될 때 MyComponent는 불러오지 않습니다.
   • MyComponent가 화면에 나타날 때만 불러옵니다.

 

🚀 lazy를 사용하면 좋은 점

1. 앱 성능 최적화
   • 모든 컴포넌트를 한 번에 불러오지 않고 필요할 때만 불러오기 때문에 초기 로딩 속도가 빨라져요.
2. 코드 분할 (Code Splitting)
   • 큰 애플리케이션의 코드를 여러 개로 나누어 관리할 수 있어요.
   • 사용자에게 필요한 부분만 빠르게 보여줄 수 있습니다.
3. 유연한 로딩 화면 설정
   • Suspense를 사용해 로딩 화면을 자유롭게 커스터마이징할 수 있어요.

 

⚠️ 주의할 점

• Suspense는 반드시 필요해요
  • React.lazy는 비동기적으로 컴포넌트를 가져오기 때문에,
    로딩 중에 뭘 보여줄지 Suspense를 통해 설정해야 해요.
• 라우팅과 함께 사용하기
  • React Router와 함께 사용하면 페이지 단위로 lazy하게 불러오는 것도 가능해요.

 

🌟 결론: React.lazy는 무엇인가요?

React의 **lazy**는 컴포넌트를 필요할 때만 불러와서 성능을 최적화해주는 기능이에요.
이렇게 동적으로 컴포넌트를 불러오면 초기 로딩 속도를 개선하고 사용자 경험을 더 부드럽게 만들 수 있답니다.

 

🎉 한 줄 요약

React.lazy는 컴포넌트를 "게으르게" 불러와서 초기 로딩 속도를 빠르게 만들어주는 기능이에요!

 

😊 마무리

• 필요할 때만 컴포넌트를 불러와서 성능을 최적화한다
• **Suspense**로 로딩 화면을 설정해준다