React 19 이전과 달리 React 19는 기본적으로 preload API를 제공한다.
React 19에서는 preload
와 preloadModule
을 통해 리소스나 모듈을 미리 로드할 수 있다. Modal과 같은 컴포넌트에 Preload를 적용하면 사용자가 클릭하기 전에 리소스를 미리 준비할 수 있어 딜레이를 줄이고 UX를 개선할 수 있다.
import React, { lazy, Suspense } from 'react';
import { preload } from 'react-dom';
const Modal = lazy(() => import('./Modal'));
function MyComponent() {
const handlePreload = () => {
preload('./Modal'); // Modal 컴포넌트를 미리 로드
};
return (
<div>
<button onMouseEnter={handlePreload} onClick={() => console.log('Open Modal')}>
Open Modal
</button>
<Suspense fallback={<div>Loading...</div>}>
<Modal />
</Suspense>
</div>
);
}
React 19에서는 ESM 모듈을 미리 로드할 수 있는 preloadModule API
도 제공된다.
import React, { lazy, Suspense } from 'react';
import { preloadModule } from 'react-dom';
const Modal = lazy(() => import('./Modal'));
function MyComponent() {
const handlePreload = () => {
preloadModule('./Modal'); // ESM 모듈 미리 로드
};
return (
<div>
<button onMouseEnter={handlePreload} onClick={() => console.log('Open Modal')}>
Open Modal
</button>
<Suspense fallback={<div>Loading...</div>}>
<Modal />
</Suspense>
</div>
);
}
React 19 이전에는 직접 preload 메서드를 구현해야 했지만, React 19에서는 react-dom에서 제공하는 기본 API를 사용하여 이를 간단히 처리할 수 있다.
const modalPromise = import('./Modal');
const Modal = React.lazy(() => modalPromise);
Modal.preload = () => modalPromise;
function MyComponent() {
useEffect(() => {
Modal.preload(); // Modal 컴포넌트를 미리 로드
}, []);
return (
<Suspense fallback={<div>Loading...</div>}>
<Modal />
</Suspense>
);
}
import { preload } from 'react-dom';
const Modal = React.lazy(() => import('./Modal'));
function MyComponent() {
useEffect(() => {
preload('./Modal'); // Modal 컴포넌트를 미리 로드
}, []);
return (
<Suspense fallback={<div>Loading...</div>}>
<Modal />
</Suspense>
);
}