React의 Suspense는 애플리케이션에서 데이터 가져오기, 코드 스플리팅, 이미지 로딩 등의 작업을 더욱 순조롭게 처리할 수 있는 기능을 제공합니다. 이를 활용하여 자바스크립트 퍼포먼스를 개선할 수 있습니다.
1. 코드 스플리팅
코드 스플리팅은 애플리케이션의 번들 크기를 줄여 초기 로딩 시간을 단축시키는 기법입니다. Suspense를 사용하면 코드 스플리팅을 보다 편리하게 구현할 수 있습니다. 다음은 Suspense를 사용하여 코드 스플리팅을 적용하는 예시입니다.
import React, { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
}
위 예시에서는 lazy 함수를 사용하여 지연로딩할 컴포넌트를 가져옵니다. Suspense 컴포넌트는 fallback 프로퍼티를 통해 로딩 중에 표시할 컴포넌트나 요소를 지정할 수 있습니다.
2. 데이터 가져오기
Suspense는 데이터 가져오기 작업을 더욱 간편하게 처리할 수 있도록 도와줍니다. React.lazy 함수와 React.Suspense 컴포넌트를 사용하여 컴포넌트를 지연로딩하는 동안 로딩을 처리하는 동안 데이터 가져오기를 처리할 수 있습니다.
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
}
위의 예시에서는 LazyComponent 컴포넌트를 가져올 때까지 로딩 중에 <div>Loading...</div>을 표시합니다.
3. 이미지 로딩
이미지 로딩은 웹 애플리케이션에서 성능 이슈를 유발할 수 있습니다. Suspense를 사용하여 이미지 로딩을 관리하면 이미지가 로드될 때까지 로딩 애니메이션을 표시할 수 있습니다.
import React, { Suspense } from 'react';
const ImageComponent = React.lazy(() => import('./ImageComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<ImageComponent src="image.jpg" alt="Image" />
</Suspense>
</div>
);
}
위 예시에서는 ImageComponent 컴포넌트가 로드되기 전에 Loading... 텍스트를 표시합니다.
Suspense를 사용하면 데이터 가져오기, 코드 스플리팅, 이미지 로딩 등 다양한 작업을 더욱 효율적으로 처리할 수 있습니다. 사용하는 환경에 맞게 Suspense를 적절히 활용하여 자바스크립트 퍼포먼스를 개선해보세요.
참고 자료