preloadModule
📝 참고
React 기반 프레임워크는 대부분 리소스 로딩을 자동으로 처리해주기 때문에, 이 API를 직접 호출할 필요가 없을 수도 있어요. 자세한 내용은 프레임워크 문서를 참고하세요.
소개
preloadModule을 사용하면 사용할 것으로 예상되는 ESM 모듈을 미리 가져올 수 있어요.
preloadModule("https://example.com/module.js", {as: "script"});레퍼런스
preloadModule(href, options)
ESM 모듈을 프리로드하려면, react-dom에서 preloadModule 함수를 호출하세요.
import { preloadModule } from 'react-dom';
function AppRoot() {
preloadModule("https://example.com/module.js", {as: "script"});
// ...
}preloadModule 함수는 브라우저에게 주어진 모듈의 다운로드를 시작해야 한다는 힌트를 제공해서, 시간을 절약할 수 있어요.
💡 부연 설명:
preloadModule은 모듈을 다운로드만 해요. 실행은 나중에 실제로 모듈이 필요할 때 일어나요. 이건 마치 "나중에 쓸 물건을 미리 사다 놓는 것"과 비슷해요. 물건을 사는 건 지금 하지만, 실제로 쓰는 건 나중이죠.ESM(ECMAScript Module)은
import/export문법을 사용하는 최신 JavaScript 모듈 시스템이에요.
매개변수(Parameters)
href: 문자열이에요. 다운로드하려는 모듈의 URL이에요.options: 객체예요. 다음 프로퍼티들을 포함해요:as: 필수 문자열이에요. 반드시'script'여야 해요.crossOrigin: 문자열이에요. 사용할 CORS 정책이에요. 가능한 값은anonymous와use-credentials예요.integrity: 문자열이에요. 진위성을 확인하기 위한 모듈의 암호화 해시예요.nonce: 문자열이에요. 엄격한 Content Security Policy를 사용할 때 모듈을 허용하기 위한 암호화 nonce예요.
반환값(Returns)
preloadModule은 아무것도 반환하지 않아요.
주의사항(Caveats)
- 같은
href로preloadModule을 여러 번 호출하는 것은 한 번 호출하는 것과 같은 효과를 가져요. - 브라우저에서는 어떤 상황에서든
preloadModule을 호출할 수 있어요: 컴포넌트를 렌더링하는 동안, Effect 안에서, 이벤트 핸들러 안에서 등등. - 서버 사이드 렌더링이나 Server Components를 렌더링할 때,
preloadModule은 컴포넌트를 렌더링하는 동안 호출하거나 컴포넌트 렌더링에서 시작된 비동기 컨텍스트에서 호출할 때만 효과가 있어요. 그 외의 모든 호출은 무시돼요.
사용법
렌더링할 때 프리로드하기
컴포넌트나 그 자식들이 특정 모듈을 사용할 것을 알고 있다면, 컴포넌트를 렌더링할 때 preloadModule을 호출하세요.
import { preloadModule } from 'react-dom';
function AppRoot() {
preloadModule("https://example.com/module.js", {as: "script"});
return ...;
}브라우저가 모듈을 (단순히 다운로드하는 것이 아니라) 즉시 실행하기 시작하길 원한다면, 대신 preinitModule을 사용하세요. ESM 모듈이 아닌 스크립트를 로드하고 싶다면, preload를 사용하세요.
💡 부연 설명:
preloadModule: ESM 모듈을 다운로드만 해요 (실행 X)preinitModule: ESM 모듈을 다운로드하고 즉시 실행해요preload: 일반 스크립트(ESM이 아닌)를 다운로드만 해요언제 뭘 쓰냐면:
- 모듈을 나중에 사용할 건데 미리 다운로드만 해두고 싶을 때 →
preloadModule- 모듈을 즉시 다운로드하고 바로 실행해도 괜찮을 때 →
preinitModule예를 들어:
- 사용자가 탭을 클릭하면 보여질 차트 라이브러리 →
preloadModule(클릭 전에 미리 다운로드만, 클릭하면 실행)- 페이지 로드 시 즉시 필요한 애널리틱스 모듈 →
preinitModule(바로 다운로드하고 실행)
이벤트 핸들러에서 프리로드하기
모듈이 필요한 페이지나 상태로 전환하기 전에 이벤트 핸들러에서 preloadModule을 호출하세요. 이렇게 하면 새 페이지나 상태를 렌더링하는 동안 호출하는 것보다 프로세스를 더 일찍 시작할 수 있어요.
import { preloadModule } from 'react-dom';
function CallToAction() {
const onClick = () => {
preloadModule("https://example.com/module.js", {as: "script"});
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}💡 부연 설명: 이벤트 핸들러에서 프리로드를 하는 게 왜 좋은지 단계별로 보면:
방법 1: 이벤트 핸들러에서 프리로드 (권장)
1. 사용자가 버튼 클릭
2.preloadModule호출 → 모듈 다운로드 시작 (백그라운드)
3.startWizard()실행 → 마법사 화면으로 이동
4. 마법사 화면 렌더링 중 → 모듈 다운로드 계속 진행
5. 실제로 모듈이 필요할 때 → 이미 다운로드 완료되어 있을 가능성 높음!방법 2: 렌더링 중에 프리로드
1. 사용자가 버튼 클릭
2.startWizard()실행 → 마법사 화면으로 이동
3. 마법사 화면 렌더링 시작
4.preloadModule호출 → 모듈 다운로드 시작
5. 실제로 모듈이 필요할 때 → 아직 다운로드 중일 수 있음이벤트 핸들러에서 호출하면 화면 전환과 모듈 다운로드가 병렬로 진행되니까 사용자 입장에서는 기다리는 시간이 줄어들어요! 이게 바로 성능 최적화의 핵심이에요.
실제 예시로 생각해보면:
- 사용자가 "고급 설정 열기" 버튼을 클릭할 때
- 고급 설정 화면에는 무거운 차트 라이브러리가 필요해요
- 버튼 클릭 순간에
preloadModule로 차트 라이브러리 다운로드를 시작하면- 고급 설정 화면이 렌더링되고 차트를 그릴 때쯤이면 라이브러리가 준비되어 있을 거예요!
