Dynamic Import (React.lazy + Suspense)

#9PerformanceEasy

Dynamic Import (React.lazy + Suspense)

Dynamic Import — React.lazy & Suspense

채팅 입력 컴포넌트에서 무거운 EmojiPicker 모듈을 클릭 시점까지 import 하지 않도록 분리하세요. 정적 import는 초기 번들에 포함되어 페이지 로딩을 느리게 만듭니다. React.lazy 와 Suspense 를 써서 이모지 버튼을 처음 누르는 순간에만 모듈을 fetch + evaluate 하도록 변경하면 됩니다.

요구사항

ChatInput 컴포넌트는 입력창과 이모지 토글 버튼을 렌더
이모지 버튼 클릭 시 EmojiPicker 가 표시되고, 다시 누르면 닫힘
초기 렌더 시점에는 EmojiPicker 모듈이 fetch/evaluate 되지 않아야 함 (= 정적 import 금지)
이모지 버튼을 처음 클릭하는 순간 모듈이 로드되고 렌더됨
닫았다 다시 열어도 모듈 로드는 한 번만 (브라우저/번들러 캐시)
모듈 로드 중에는 Suspense fallback을 표시

힌트

const EmojiPicker = lazy(() => import('./EmojiPicker'))
<Suspense fallback={...}>{open && <EmojiPicker />}</Suspense>
EmojiPicker.tsx 의 export는 default export 여야 lazy() 와 자연스럽게 매칭됨

학습 포인트

React.lazy + import() 의 실제 사용법 — 코드 분할의 가장 흔한 진입점
Suspense 경계가 "비동기 컴포넌트 렌더링"을 어떻게 통합하는지
정적 import는 초기 번들에, dynamic import는 별도 chunk로 — 언제 import 되는지가 핵심

import { useState } from 'react';
import { EmojiPicker } from './EmojiPicker'; // TODO: 이걸 React.lazy로 바꾸세요

export function ChatInput() {
  const [open, setOpen] = useState(false);
  const [text, setText] = useState('');

  return (
    <div>
      <input
        data-testid="msg"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type a message..."
      />
      <button data-testid="toggle" onClick={() => setOpen((o) => !o)}>
        😀
      </button>
      {/* TODO: Suspense로 감싸고, EmojiPicker를 lazy로 분리하세요. */}
      {open && <EmojiPicker onSelect={(e) => setText((t) => t + e)} />}
    </div>
  );
}

Open Sandbox

Sandpack 로드 중…

import { useState } from 'react';
import { EmojiPicker } from './EmojiPicker'; // TODO: 이걸 React.lazy로 바꾸세요

export function ChatInput() {
  const [open, setOpen] = useState(false);
  const [text, setText] = useState('');

  return (
    <div>
      <input
        data-testid="msg"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type a message..."
      />
      <button data-testid="toggle" onClick={() => setOpen((o) => !o)}>
        😀
      </button>
      {/* TODO: Suspense로 감싸고, EmojiPicker를 lazy로 분리하세요. */}
      {open && <EmojiPicker onSelect={(e) => setText((t) => t + e)} />}
    </div>
  );
}

Open Sandbox