React에서 Suspense와 Lazy Loading은 어떻게 사용하나요?
_____A1:
- Lazy Loading 은 컴포넌트를 필요할 때까지 불러오지 않고 지연시키는 기법입니다. 이를 통해 초기 로딩 속도를 개선할 수 있습니다.
- Suspense 는 React에서 Lazy Loaded 컴포넌트가 로딩되는 동안 보여줄 fallback UI(예: 로딩 스피너)를 정의해주는 컴포넌트입니다.
---
Q2: React에서 Lazy Loading 컴포넌트를 어떻게 만드나요?
A2: React는 `React.lazy()` 함수를 제공하여 컴포넌트를 동적으로 import하도록 지원합니다. 예시:
```jsx
import React, { lazy, Suspense } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
```
---
Q3: Suspense는 어떻게 사용하나요?
A3: Lazy Loaded 컴포넌트를 사용할 때, Suspense 컴포넌트로 감싸고 `fallback` 속성에 로딩 중 보여줄 UI를 설정합니다. 예시:
```jsx
```
---
Q4: Suspense와 Lazy는 반드시 같이 써야 하나요?
A4: 네. `React.lazy`로 만든 컴포넌트는 로딩이 완료될 때까지 Suspense가 표시하는 fallback UI가 필요합니다. 따라서 Lazy Loaded 컴포넌트를 사용할 땐 Suspense로 감싸줘야 합니다.
---
Q5: Suspense의 fallback 속성에는 어떤 요소를 넣을 수 있나요?
A5: JSX 요소라면 어떤 것이든 넣을 수 있습니다. 일반적으로 로딩 스피너, 텍스트, 혹은 커스텀 로딩 컴포넌트를 넣습니다. 예:
```jsx
```
---
Q6: Suspense를 여러 곳에 중첩해서 쓸 수 있나요?
A6: 네, 가능합니다. 이를 통해 각각의 Lazy Loaded 컴포넌트 로딩 상태를 독립적으로 처리할 수 있습니다.
---
A7:
- 큰 컴포넌트를 초기 렌더링에서 제외하고 싶을 때
- 페이지별로 컴포넌트를 분리하여 라우팅할 때
- 사용자 인터랙션 이후에 불러와도 되는 컴포넌트가 있을 때
---
Q8: React.lazy는 서버 사이드 렌더링(SSR)과 호환되나요?
A8: 기본적으로는 SSR에서는 지원이 제한적입니다. SSR 환경에서는 `React.lazy` 대신 다른 코드 분할 라이브러리(e.g. Loadable Components)를 사용하는 것이 좋습니다.
---
Q9: 예제를 통한 기본 사용법은 어떻게 되나요?
A9:
```jsx
import React, { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
My App
);
}
export default App;
```
---
Q10: Lazy Loading을 활성화하려면 별도 설정이 필요한가요?
A10: 일반적으로 Create React App, Next.js, Vite 등에서 자동으로 지원합니다. 직접 Webpack 설정 시에는 `import()` 구문에 대한 코드 분할 설정 여부를 확인하면 됩니다.
---
요약:
- `React.lazy()`로 컴포넌트를 동적 import 한다.
- `Suspense`로 감싸고 `fallback` UI를 정의한다.
- Suspense와 Lazy Loading은 함께 사용해야 한다.
- SSR 환경에서는 React.lazy 대신 대체 방법이 필요하다.
