리액트에서 @loadable/component로 코드 스플리팅 하기

느린 첫 로딩을 줄이는 똑똑한 방법

React 프로젝트를 만들다 보면, 어느 순간 빌드된 번들 크기가 커져서 페이지 진입이 느려지는 현상을 겪게 된다.
그럴 때 자주 듣게 되는 말이 바로 "코드 스플리팅"

React 공식적으로는 React.lazy()와 Suspense를 쓰는 걸 권장하지만, 여기엔 살짝 불편한 점도 있다.

그래서 나온 게 바로 @loadable/component라고 한다

 

 

 @loadable/component란?

@loadable/component는 React 컴포넌트를 동적으로 불러오고, 필요할 때만 로드하는 방식으로 렌더링 최적화를 도와주는 라이브러리이다.

공식 문서: https://loadable-components.com/

Loadable Components

 

 설치

npm install @loadable/component

 

+ 타입스크립트에선 @types/loadable__component 패키지를 추가로 설치해준다. (이름이 특이하게 다르다)

https://www.npmjs.com/package/@types/loadable__component

@types/loadable__component

 

🔍 기본 사용법

// LazyComponent.tsx
export default function LazyComponent() {
  return <div>느긋하게 로딩되는 컴포넌트 🐢</div>;
}

// App.tsx
import loadable from '@loadable/component';

const LazyComponent = loadable(() => import('./LazyComponent'));

export default function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <LazyComponent />
    </div>
  );
}

이렇게 쓰면 LazyComponent는 초기 로딩 번들에 포함되지 않고, 해당 컴포넌트가 실제로 렌더링될 때 네트워크로 따로 불러와짐.

 

 

로딩 상태 넣기

const LazyComponent = loadable(() => import('./LazyComponent'), {
  fallback: <div>로딩 중...</div>,
});

fallback을 설정하면 컴포넌트가 로드될 때까지 보여줄 UI를 지정할 수 있다.
이건 React.Suspense랑 비슷하지만, @loadable/component는 SSR에서도 동작하기 때문에 유연성이 더 좋음.

 

❓ 왜 React.lazy() 대신 이걸 쓰는가?

항목	React.lazy	@loadable/component
SSR 지원	❌ 안 됨	✅ 됨
preload 지원	❌ 없음	✅ 있음
fallback 처리	Suspense 필수	옵션으로 직접 지정 가능
코드 관리	기본 제공	외부 라이브러리

React 공식 방식도 나쁘진 않지만, SSR이 필요한 프로젝트나 사용자 경험을 더 세밀하게 조정하고 싶은 경우엔 @loadable/component가 더 유리할 수 있다.

+ 사전 로딩(preload)도 가능 🥊

'use client';
import loadable from '@loadable/component';
import React from 'react';

const LazyComponent = loadable(() => import('./LazyComponent'));

// 미리 불러오기
LazyComponent.preload();

function LoadablePage() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <LazyComponent />
    </div>
  );
}
export default LoadablePage;

이렇게 하면 사용자가 해당 컴포넌트를 보기 전에 미리 로딩해둘 수도 있다
예를 들어 버튼에 마우스를 올렸을 때 미리 로딩하면 UX가 더 부드러워진다

 

사용 후기...

실제로 코드 스플리팅을 하지 않으면, 첫 진입에서 1MB 넘는 JS 번들을 한 번에 받게 되면서 First Contentful Paint (FCP) 가 느려지기도 하고, 모바일 환경에서는 화이트스크린이 길어지는 현상이 발생했다.

 

@loadable/component를 도입한 뒤에는 페이지별로 필요한 컴포넌트만 불러오게 되면서 초기 로딩이 훨씬 가벼워졌고, fallback으로 로딩 상태도 유연하게 제어할 수 있어 좋았다.

 

🔗 참고

• 공식 문서: https://loadable-components.com/docs/api-loadable-component
• GitHub 레포: https://github.com/gregberge/loadable-components

GitHub - gregberge/loadable-components: The recommended Code Splitting library for React ✂️✨

 

 

실제 작성한 코드 🙊

https://github.com/citron03/practice-next-15/commit/68d53c2f1155973f88c98726181d5e05d2b04e5f

feat(loadable): @loadable/component setting and init · citron03/practice-next-15@68d53c2