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

preinit

preinit은 스타일시트나 외부 스크립트를 미리 받아오고 평가(실행)할 수 있게 해줍니다.

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

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

레퍼런스

`preinit(href, options)`

스크립트나 스타일시트를 미리 받아오려면 react-dom에서 preinit 함수를 호출하세요.

import { preinit } from 'react-dom';

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

preinit 함수는 브라우저에 해당 리소스를 즉시 다운로드하고 평가(실행)하라는 힌트를 제공합니다. 스크립트는 다운로드가 끝나는 즉시 실행되고, 스타일시트는 문서에 삽입되어 바로 적용됩니다.

파라미터

href: 문자열. 다운로드 및 실행할 리소스의 URL입니다.
options: 객체. 다음 속성을 포함할 수 있습니다:
- as: 문자열, 필수. 리소스의 타입. script 또는 style 중 하나입니다.
- precedence: 문자열. 스타일시트에 필수. 스타일시트의 우선순위(reset, low, medium, high).
- crossOrigin: 문자열. CORS 정책(anonymous, use-credentials).
- integrity: 문자열. 리소스의 무결성 검증용 해시.
- nonce: 문자열. CSP(Content Security Policy)에서 허용할 난수값.
- fetchPriority: 문자열. 리소스의 다운로드 우선순위(auto, high, low).

반환값

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

주의사항

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

사용법

렌더링 시 미리 받아오기

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

예시: 외부 스크립트 미리 받아오기

import { preinit } from 'react-dom';

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

예시: 스타일시트 미리 받아오기

import { preinit } from 'react-dom';

function AppRoot() {
  preinit("https://example.com/styles.css", {as: "style", precedence: "high"});
  return ...;
}

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

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

import { preinit } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preinit("https://example.com/wizardStyles.css", {as: "style", precedence: "medium"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}