React에서 `lazy`와 `Suspense`를 사용한 코드 스플리팅
Source: Dev.to
위에 제공된 링크 외에 번역할 텍스트가 포함되어 있지 않습니다. 번역을 원하는 본문을 그대로 복사해서 알려주시면, 원본 형식과 마크다운을 유지한 채 한국어로 번역해 드리겠습니다.
React에서 코드 스플리팅
React에서 코드 스플리팅은 실제로 필요할 때만 애플리케이션의 일부를 로드할 수 있게 해줍니다. 모든 JavaScript를 한 번에 다운로드하는 대신, 사용자가 UI와 상호작용할 때까지 덜 중요한 또는 무거운 컴포넌트의 로드를 미룰 수 있습니다. 이는 특히 규모가 큰 애플리케이션이나 사용자가 절대 보지 않을 수도 있는 컴포넌트에 유용합니다.
왜 코드 스플리팅이 중요한가
장점
- 성능 향상 – 초기 JavaScript 번들이 작아져서 특히 느린 네트워크나 저사양 디바이스에서 페이지 로드 시간이 빨라집니다.
- 사용자 경험 개선 – 첫 렌더링 시 필수 코드만 로드되고, 추가 코드는 사용자가 필요할 때 나중에 가져옵니다.
Source:
문제: 불필요한 네트워크 요청
React.lazy와 Suspense를 사용하기 전에도 SlowComponent는 이미 네트워크 탭에 로드되어 있었습니다. 하지만:
- 토글 버튼이
false였음 - 사용자가 해당 컴포넌트를 열어보거나 보지 않았음
즉, 사용자가 절대 사용하지 않을 수도 있는 코드를 브라우저가 다운로드한 것입니다.
Lazy 로딩 없이 (lazy loading 이전)
SlowComponent는 페이지가 로드되는 즉시 로드됩니다:
이는 낭비되는 대역폭이며 불필요한 작업입니다.
해결책: React.lazy + Suspense
React는 렌더링될 때만 컴포넌트를 로드하기 위해 lazy와 Suspense를 제공합니다.
기본 예시
import React, { lazy, Suspense } from 'react';
const DataComponent = lazy(() => import('./DataComponent'));
function MyComponent() {
return (
Loading...}>
);
}DataComponent는 실제로 렌더링될 때까지 로드되지 않습니다.- 컴포넌트가 로드되는 동안 대체 UI가 표시됩니다.
무거운 컴포넌트를 활용한 실용 예시
이 예시에서는:
SlowComponent는 무겁고 사용자가 버튼을 클릭할 때만 로드되어야 합니다.useTransition을 사용하여 UI가 반응성을 유지하도록 합니다.
import { useState, useTransition, lazy, Suspense } from 'react';
const SlowComponent = lazy(() => import('./SlowComponent'));
const App = () => {
const [text, setText] = useState('');
const [items, setItems] = useState([]);
const [isPending, startTransition] = useTransition();
const [show, setShow] = useState(false);
const handleChange = (e) => {
setText(e.target.value);
startTransition(() => {
const newItems = Array.from({ length: 5000 }, (_, index) => (
));
setItems(newItems);
});
};
return (
#### Items Below
{isPending ? (
'Loading...'
) : (
{items}
)}
setShow(!show)} className="btn">
Toggle
{show && (
)}
);
};
export default App;네트워크 탭에서 무엇이 바뀌었나요?
lazy 적용 후
SlowComponent는 초기 페이지 로드 시 로드되지 않습니다:
사용자 행동에 의해서만 로드됨
컴포넌트는 사용자가 토글 버튼을 클릭할 때만 가져옵니다:
바로 이것이 우리가 원하는 바입니다.
Key Takeaways
- Lazy loading –
SlowComponent는 렌더링될 때까지 다운로드되지 않는다. - Suspense – 컴포넌트를 가져오는 동안 로딩 상태를 처리한다.
- Better performance – 불필요한 JavaScript가 미리 로드되지 않는다.
- User‑driven loading – 사용자가 실제로 필요로 할 때만 코드를 가져온다.
선택 사항: Suspense 로 더 많이 감싸기
앱에 여러 개의 lazy‑loaded 컴포넌트가 포함되어 있다면, Suspense 로 컴포넌트 트리의 더 큰 부분을 감쌀 수 있습니다. 많은 경우 전체 반환문을 감싸는 것이 일반적이며, 이렇게 하면 모든 lazy 컴포넌트가 동일한 로딩 폴백을 공유합니다:
{/* one or more lazy‑loaded components */}
결론
React.lazy와 Suspense를 사용하기 전에는 토글이 false일 때도 SlowComponent가 다운로드되어, 사용자가 보지 않을 수도 있는 코드에 대한 비용을 지불하게 되었습니다.
코드 스플리팅을 사용함으로써 우리는:
- 초기 번들 크기 감소
- 성능 향상
- 실제로 필요할 때만 코드 로드
Credits: John Smilga’s course