무엇
preinitModule은 ESM 모듈을 내려받고 곧바로 실행까지 해 두라고 브라우저에 알리는 API다. 필요한 시점을 기다리지 않고 미리 평가를 끝내 둔다.
href는 모듈 URL, options는 옵션 객체이며 as: 'script'가 필수다.
import { preinitModule } from 'react-dom'
preinitModule('https://example.com/module.js', { as: 'script' })
무슨 일이 일어나나
내려받기와 실행을 함께 한다. preloadModule이 다운로드만 하고 멈추는 것과 다르다. 클라이언트에서는 렌더링 중, Effect 안, 이벤트 핸들러 안 어디서든 부를 수 있다. 서버 렌더링·서버 컴포넌트에서는 렌더링 중이거나 렌더링에서 비롯된 비동기 컨텍스트에서 불렀을 때만 효과가 있고, 나머지는 무시된다.
같은 href로 여러 번 부르면 한 번 부른 것과 동일하게 처리한다.
사용법
options 필드는 preloadModule과 같다.
as—'script'고정, 필수crossOrigin—'anonymous'또는'use-credentials'integrity— Subresource Integrity 해시nonce— CSP nonce
function CallToAction() {
const onClick = () => {
preinitModule('https://example.com/module.js', { as: 'script' })
startWizard()
}
return <button onClick={onClick}>시작</button>
}
곧 실행될 게 확실한 모듈이면 preinitModule, 실행 시점을 나중으로 미루고 다운로드만 앞당기고 싶으면 preloadModule을 쓴다.
실무 예시
다음 상호작용에서 즉시 실행돼야 하는 서드파티 스크립트(위젯 초기화 등)를, 그 상호작용이 예상되는 시점에 미리 실행까지 끝내 두는 식으로 쓴다.
왜 중요한가
preloadModule과 마찬가지로 프레임워크·번들러가 내부적으로 다루는 저수준 힌트다. 직접 부를 일은 드물고, "다운로드만" vs "다운로드+실행"이라는 두 API의 차이를 아는 정도로 충분하다.
Reference