원문: https://react.dev/reference/react-dom/preloadModule

preloadModule

preloadModule은 앞으로 사용할 것으로 예상되는 ESM(ECMAScript Module) 모듈을 미리 받아올 수 있게 해줍니다.

preloadModule("https://example.com/module.js", {as: "script"});

레퍼런스
- preloadModule(href, options)
사용법
- 렌더링 시 미리 받아오기
- 이벤트 핸들러에서 미리 받아오기

레퍼런스

`preloadModule(href, options)`

ESM 모듈을 미리 받아오려면 react-dom에서 preloadModule 함수를 호출하세요.

import { preloadModule } from 'react-dom';

function AppRoot() {
  preloadModule("https://example.com/module.js", {as: "script"});
  // ...
}

preloadModule 함수는 브라우저에 해당 모듈을 즉시 다운로드하라는 힌트를 제공합니다.

파라미터

href: 문자열. 다운로드할 모듈의 URL입니다.
options: 객체. 다음 속성을 포함할 수 있습니다:
- as: 문자열, 필수. 반드시 'script'여야 합니다.
- crossOrigin: 문자열. CORS 정책(anonymous, use-credentials).
- integrity: 문자열. 모듈의 무결성 검증용 해시.
- nonce: 문자열. CSP(Content Security Policy)에서 허용할 난수값.

반환값

preloadModule은 아무것도 반환하지 않습니다.

주의사항

동일한 href로 여러 번 호출해도 한 번 호출한 것과 동일한 효과입니다.
브라우저 환경에서는 컴포넌트 렌더링, Effect, 이벤트 핸들러 등 언제든 호출할 수 있습니다.
서버 사이드 렌더링 또는 Server Components에서는 컴포넌트 렌더링 중이거나 렌더링에서 파생된 비동기 컨텍스트에서만 효과가 있습니다. 그 외의 호출은 무시됩니다.

사용법

렌더링 시 미리 받아오기

컴포넌트나 자식이 특정 모듈을 사용할 것이 확실하다면, 컴포넌트 렌더링 시 preloadModule을 호출하세요.

import { preloadModule } from 'react-dom';

function AppRoot() {
  preloadModule("https://example.com/module.js", {as: "script"});
  return ...;
}

만약 모듈을 즉시 실행하고 싶다면 preloadModule 대신 preinitModule을 사용하세요. ESM 모듈이 아닌 스크립트를 미리 받아오려면 preload을 사용하세요.

이벤트 핸들러에서 미리 받아오기

페이지나 상태 전환 전에 외부 모듈이 필요할 것이 예상된다면, 이벤트 핸들러에서 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>
  );
}