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

preinitModule

preinitModule은 ESM(ECMAScript Module) 모듈을 미리 받아오고 평가(실행)할 수 있게 해줍니다.

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

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

레퍼런스

`preinitModule(href, options)`

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

import { preinitModule } from 'react-dom';

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

preinitModule 함수는 브라우저에 해당 모듈을 즉시 다운로드하고 평가(실행)하라는 힌트를 제공합니다. 모듈은 다운로드가 끝나는 즉시 실행됩니다.

파라미터

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

반환값

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

주의사항

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

사용법

렌더링 시 미리 받아오기

컴포넌트나 자식이 특정 모듈을 사용할 것이 확실하다면, 컴포넌트 렌더링 시 preinitModule을 호출하세요. 이렇게 하면 모듈이 즉시 다운로드 및 평가됩니다.

import { preinitModule } from 'react-dom';

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

만약 모듈을 다운로드만 하고 즉시 실행하지 않으려면 preloadModule을 사용하세요. ESM 모듈이 아닌 스크립트를 미리 받아오려면 preinit을 사용하세요.

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

페이지나 상태 전환 전에 외부 모듈이 필요할 것이 예상된다면, 이벤트 핸들러에서 preinitModule을 호출해 미리 다운로드를 시작할 수 있습니다.

import { preinitModule } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preinitModule("https://example.com/module.js", {as: "script"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}