React.lazy()란?

React.lazy()란?

1. React.lazy()란 무엇인가?

React.lazy()는 React에서 코드 스플리팅(Code Splitting)을 활용할 수 있도록 도와주는 함수입니다. 특정 컴포넌트를 동적으로 불러와서 필요할 때만 렌더링할 수 있도록 해주며, 초기 번들 크기를 줄이고 앱의 성능을 향상시키는 데 유용합니다.

기본적인 사용법

import React, { Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

여기서 React.lazy()를 사용하여 LazyComponent를 동적으로 불러오고 있습니다. Suspense 컴포넌트는 비동기 로딩 동안 보여줄 UI(fallback)를 정의하는 역할을 합니다.

2. React.lazy()를 사용했을 때와 사용하지 않았을 때의 차이

React.lazy()를 사용하지 않았을 때

import LazyComponent from './LazyComponent';

function App() {
  return <LazyComponent />;
}

이 경우 LazyComponent는 애플리케이션이 처음 로드될 때 번들에 포함됩니다. 따라서 초기 로딩 속도가 느려질 수 있으며, 사용자가 필요하지 않은 컴포넌트도 미리 로드됩니다.

React.lazy()를 사용했을 때

React.lazy()를 사용하면 해당 컴포넌트가 실제로 필요할 때(App이 렌더링될 때) 동적으로 불러와지므로 초기 번들 크기를 줄일 수 있습니다. 특히, 큰 규모의 애플리케이션에서는 초기 로딩 속도를 크게 개선할 수 있습니다.

그러나 React.lazy()는 코드 스플리팅을 적용하는 기능을 제공하지만, 비동기적으로 가져온 코드가 실행될 때까지 기다려주는 기능은 없습니다. 즉, 컴포넌트의 로딩과 실행은 분리되지만, 네트워크 지연 등의 문제는 Suspense의 fallback을 통해 처리해야 합니다.

3. React.lazy()가 서버 컴포넌트에서는 효과가 없는 이유

React.lazy()는 클라이언트에서 동적으로 컴포넌트를 불러오는 방식입니다. 하지만 서버 컴포넌트(Server Component)에서는 이미 서버에서 모든 컴포넌트가 렌더링되므로, 클라이언트 측에서 필요한 시점에 동적으로 불러오는 기능이 무의미해집니다.

서버 컴포넌트에서의 동작 방식

Next.js와 같은 프레임워크에서 서버 컴포넌트는 서버에서 미리 렌더링된 HTML을 생성하여 클라이언트에 전달합니다. 이 과정에서는 JavaScript 코드 실행이 필요하지 않으므로, React.lazy()를 사용해도 클라이언트에서 코드를 분할하는 효과를 얻을 수 없습니다.

클라이언트 컴포넌트에서의 효과

반면 클라이언트 컴포넌트(Client Component)에서는 React가 브라우저에서 실행되므로 React.lazy()를 활용해 동적으로 컴포넌트를 불러올 수 있습니다. 클라이언트 측에서는 JavaScript가 실행되면서 비동기적으로 필요한 모듈을 가져오는 방식이 가능하기 때문입니다.

4. 결론

• React.lazy()는 코드 스플리팅을 활용하여 초기 번들 크기를 줄이고, 필요할 때만 컴포넌트를 로드할 수 있도록 도와줍니다.
• 서버 컴포넌트에서는 이미 HTML이 서버에서 렌더링되므로 React.lazy()를 사용해도 효과가 없습니다.
• 클라이언트 컴포넌트에서만 동적 import를 통해 성능 최적화 효과를 볼 수 있습니다.

즉, React.lazy()는 SPA(Single Page Application) 환경에서 특히 유용하며, SSR(Server-Side Rendering) 환경에서는 별다른 효과를 기대할 수 없습니다. 따라서 Next.js 등에서 서버 컴포넌트와 함께 사용할 때는 이러한 차이를 고려해야 합니다.