React.lazy란?
React.lazy는 React에서 코드 스플리팅(Code Splitting)을 구현하기 위한 함수. 동적으로 컴포넌트를 로드할 때 사용되며, 애플리케이션 초기 로딩 시간을 줄이고 필요할 때만 코드를 가져온다.
코드 스플리팅
코드 스플리팅은 애플리케이션 코드를 여러 개의 청크(chunk)로 분리하여 필요한 시점에 로드하는 기법.
React.lazy는 이러한 코드 스플리팅을 쉽게 구현할 수 있도록 돕는다.
React.lazy 사용법
React.lazy를 사용하면 동적으로 컴포넌트를 로드하고, Suspense를 사용해 로딩 상태를 표시할 수 있다.
1. Lazy 컴포넌트 정의
React.lazy는 컴포넌트를 반환하는 함수를 인자로 받는다.
🖥️ javascript
const LazyComponent = React.lazy(() => import('./MyComponent'));여기서 import('./MyComponent')는 JavaScript의 동적 import 문법을 사용해 컴포넌트를 비동기로 로드한다.
2. Suspense와 함께 사용
Suspense의 fallback 속성을 통해 로딩 중 표시할 컴포넌트를 지정.
🖥️ jsx
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}위 코드에서 MyComponent를 로드하는 동안, fallback에 정의된 <div>Loading...</div>이 화면에 표시된다.
React.lazy 장점
- 초기 로딩 시간 감소
: 필요하지 않은 컴포넌트는 처음부터 로드하지 않으므로 초기 렌더링 속도가 빨라진다. - 사용자 경험 개선
: 사용자가 특정 경로나 기능을 방문할 때 필요한 코드만 로드되므로,
대규모 애플리케이션의 성능이 개선된다.
주의점
- React.lazy는 default export를 사용하는 컴포넌트에서만 동작한다. 만약 named export를 사용하는 경우, React.lazy 대신 일반적인 동적 import 문법과 함께 React.Suspense를 사용해야 한다.
- 반드시
Suspense로 감싸야 한다. 그렇지 않으면 컴포넌트를 로드하는 동안 에러가 발생한다.
lazy loading
개념
: Lazy Loading(지연 로딩)은 데이터나 리소스를 "필요할 때 로드"하는 기법이다.
이는 성능 최적화와 리소스 절약을 목적으로 한다.
React.lazy ? lazy loading?
React.lazy는 lazy loading의 한 구현 방법으로, 특정 상황에서 사용.
그러나 React.lazy 자체는 React에서 제공하는 코드 스플리팅과 동적 로딩을 위한 API일 뿐이며, 일반적인 lazy loading 개념의 모든 경우를 포함하지는 않는다.
예시
- 이미지 Lazy Loading
: 사용자가 화면을 스크롤해서 이미지가 화면에 보일 때 이미지를 로드. - 데이터 Lazy Loading
: API 호출로 필요한 데이터만 가져옴. - 컴포넌트 Lazy Loading
: 애플리케이션에서 사용자가 특정 경로에 접근할 때만 해당 경로의 코드를 로드.
React.lazy와 Lazy Loading의 관계
React.lazy는 컴포넌트 Lazy Loading을 구현하는 React의 도구다.
따라서 React.lazy는 lazy loading의 특정 사례라고 볼 수 있다.
React.lazy로 구현된 로직은 필요할 때 컴포넌트를 동적으로 가져오는 방식으로
azy loading의 핵심 아이디어를 따른다. 그러나 Lazy Loading이 React.lazy에만 국한된 것은 아니다.
차이점
1. 범용성과 대상
- Lazy Loading : 이미지, 데이터, 비디오, 스크립트 등 다양한 리소스에 적용 가능.
- React.lazy : React 컴포넌트 로딩에만 사용됨.
2. 구현 방식
- Lazy Loading : Intersection Observer, 이벤트 핸들러 등 다양한 기술을 활용.
- React.lazy : React의 코드 스플리팅 기능과 Suspense를 활용.
➡️ lazy loading은 더 넓은 개념이며, React.lazy는 컴포넌트 로딩에 특화된 구현.
