리액트에서 "동적 import"와 "코드 스플리팅(Code Splitting)"을 구현하는 방법은 무엇인가요?
_____A1: 동적 import는 JavaScript 모듈을 필요할 때 즉시 로드하는 기능입니다. 리액트에서는 `import()` 함수를 사용해 컴포넌트를 동적으로 불러옴으로써 초기 번들 크기를 줄이고, 사용자가 실제로 필요로 할 때만 해당 코드를 로드할 수 있습니다.
---
Q2: 코드 스플리팅(Code Splitting)이란 무엇인가요?
A2: 코드 스플리팅은 애플리케이션 코드가 여러 개의 작은 청크(bundle)로 분리되어 필요에 따라 비동기적으로 로드되도록 하는 기법입니다. 이렇게 하면 초기 로딩 속도가 개선되고, 사용자가 특정 기능을 사용할 때만 관련 코드가 로드되어 최적화된 사용자 경험을 제공합니다.
---
Q3: 리액트에서 코드 스플리팅을 구현하는 기본 방법은?
A3: 리액트에서는 `React.lazy()`와 `Suspense` 컴포넌트를 활용해 쉽고 효과적으로 코드 스플리팅을 할 수 있습니다.
```jsx
import React, { Suspense } from 'react';
// 컴포넌트를 동적으로 import
const LazyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
);
}
```
- `React.lazy`는 동적 import를 통해 컴포넌트를 비동기 로드하도록 도와줌
- `Suspense`는 로딩 중 보여줄 대체 UI(fallback)를 지정
---
Q4: 동적 import를 사용하려면 어떻게 작성하나요?
A4: 동적 import는 `import()` 함수 형태로 사용합니다.
```javascript
import('./MyComponent').then(module => {
const MyComponent = module.default;
// MyComponent를 활용
});
```
리액트에서 동적 import를 `React.lazy`와 결합하면 컴포넌트 단위로 코드 스플리팅이 가능합니다.
---
Q5: 동적 import와 React.lazy 차이는?
A5:
- `import()`는 자바스크립트 표준 동적 모듈 로딩 함수로, Promise를 반환합니다.
- `React.lazy`는 내부적으로 `import()`를 사용하고, 리액트 컴포넌트 형태로 자동 변환해주는 편의 함수입니다. 따라서 컴포넌트를 비동기로 불러올 때는 `React.lazy` 사용이 권장됩니다.
---
Q6: 리액트 라우터와 코드 스플리팅을 함께 사용하려면?
A6: 각 라우트 컴포넌트를 `React.lazy`로 감싸 비동기 로딩할 수 있습니다.
```jsx
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense } from 'react';
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
function App() {
);
}
```
---
Q7: 코드 스플리팅 시 로딩 상태를 표시하는 이유는?
A7: 코드가 비동기 로딩되기 때문에 렌더링까지 시간이 걸릴 수 있습니다. `Suspense`로 감싼 영역에서 `fallback` 값을 지정하면, 로딩 중인 상태를 사용자에게 알리고 빈 화면이나 렌더링 지연에 의한 이탈을 줄여줍니다.
---
Q8: 주의할 점 또는 제한사항이 있나요?
A8:
- `React.lazy`는 기본적으로 컴포넌트 기본 export만 지원(`default export` 필요).
- 서버 사이드 렌더링(SSR) 환경은 별도의 설정 없이 사용 불가하며, `loadable-components` 같은 라이브러리 활용해야 함.
- 코드 스플리팅이 너무 많으면 네트워크 요청이 증가하여 오히려 성능 저하가 발생할 수 있으므로 적절한 분할 전략 필요.
---
Q9: React.lazy 사용 시 오류 처리 방법은?
A9: `React.lazy`에서는 자체적으로 오류 처리를 지원하지 않으므로, 에러 경계(Error Boundary) 컴포넌트를 만들어 감싸야 합니다.
```jsx
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return
컴포넌트 로딩에 실패했습니다.
;}
return this.props.children;
}
}
```
```jsx
