React에서 Lazy Loading을 구현하는 방법은 무엇인가요?
_____A1: React에서 Lazy Loading이란 필요한 시점에 해당 컴포넌트를 동적으로 불러오는 기법으로, 초기 로딩 속도를 개선하고 불필요한 자원 낭비를 줄여줍니다.
---
Q2: React에서 Lazy Loading을 구현하는 기본 방법은 무엇인가요?
A2: React에서는 `React.lazy()` 함수와 `Suspense` 컴포넌트를 사용해 Lazy Loading을 구현합니다. `React.lazy()`로 컴포넌트를 비동기적으로 로드하고, `Suspense` 내부에서 로딩 중 보여줄 UI를 설정합니다.
---
Q3: React.lazy() 함수 사용법은 어떻게 되나요?
A3:
```jsx
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
);
}
export default App;
```
`React.lazy()` 안에 dynamic import 구문을 전달하면 해당 컴포넌트를 필요할 때 로딩합니다.
---
Q4: Suspense 컴포넌트의 역할은 무엇인가요?
A4: `Suspense`는 Lazy Loaded 컴포넌트가 로딩되는 동안 보여줄 대체 UI(fallback)를 지정합니다. 예를 들어 로딩 스피너나 로딩 텍스트를 표시할 수 있습니다.
---
Q5: Lazy Loading 할 컴포넌트에 어떤 제약사항이 있나요?
A5:
- `React.lazy()`는 오직 기본 내보내기(default export)된 컴포넌트만 지원합니다.
- 중첩된 Lazy 로딩 컴포넌트들은 반드시 각각 `Suspense`로 감싸야 합니다.
- 서버 사이드 렌더링(SSR) 환경에서는 `React.lazy()`가 지원되지 않습니다.
---
Q6: Lazy Loading을 사용할 때 주의할 점은?
A6:
- 너무 작은 컴포넌트까지 Lazy Loading하면 네트워크 요청이 오히려 늘어나 성능 저하를 유발할 수 있습니다.
- 동적으로 로드되는 컴포넌트가 많으면 사용자 경험이 불안정해질 수 있어 적절한 fallback UI를 제공해야 합니다.
---
Q7: Route 기반 Lazy Loading은 어떻게 구현하나요?
A7: React Router와 같이 라우트를 Lazy Loading할 때도 `React.lazy()`와 `Suspense`를 활용합니다.
```jsx
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
function App() {
return (
);
}
```
---
Q8: React.lazy() 대신 다른 방법으로 Lazy Loading할 수 있나요?
A8: 네, `loadable-components`, `react-loadable` 같은 외부 라이브러리를 사용하면 더 정교한 코드 분할과 로딩 상태 관리가 가능합니다.
---
요약:
- `React.lazy(() => import('컴포넌트경로'))`로 Lazy Loaded 컴포넌트를 만듭니다.
- `Suspense fallback`으로 로딩 중 보여줄 UI를 감쌉니다.
- 기본 export 컴포넌트만 지원하고 SSR에선 제한이 있습니다.
- 사용 적절성과 네트워크 요청 비용을 고려해 Lazy Loading을 적용하세요.
