preinit
참고
React 기반 프레임워크는 종종 리소스 로딩을 대신 처리해주므로, 이 API를 직접 호출할 필요가 없을 수 있어요. 자세한 내용은 프레임워크 문서를 참고하세요.
소개
preinit을 사용하면 스타일시트나 외부 스크립트를 미리 가져와서 평가(실행)할 수 있어요.
preinit("https://example.com/script.js", {as: "script"});preinit은 리소스를 다운로드하고 바로 실행(또는 적용)까지 하는 강력한 최적화 기능이에요. 스크립트는 다운로드 완료 즉시 실행되고, 스타일시트는 다운로드 완료 즉시 문서에 삽입돼요!
목차
레퍼런스
preinit(href, options)
스크립트나 스타일시트를 미리 초기화하려면, react-dom에서 preinit 함수를 호출하세요.
import { preinit } from 'react-dom';
function AppRoot() {
preinit("https://example.com/script.js", {as: "script"});
// ...
}preinit 함수는 브라우저에게 주어진 리소스를 다운로드하고 실행하기 시작해야 한다는 힌트를 제공하며, 이는 시간을 절약할 수 있어요. preinit한 스크립트는 다운로드가 완료되면 실행돼요. preinit한 스타일시트는 문서에 삽입되어 즉시 효과를 발휘해요.
매개변수
href: 문자열이에요. 다운로드하고 실행하고 싶은 리소스의 URL이에요.options: 객체예요. 다음 속성들을 포함해요:as: 필수 문자열이에요. 리소스의 유형이에요. 가능한 값은script와style이에요.precedence: 문자열이에요. 스타일시트에 필수예요. 다른 스타일시트와 비교해서 어디에 삽입할지 지정해요. 더 높은 precedence를 가진 스타일시트는 더 낮은 것을 재정의할 수 있어요. 가능한 값은reset,low,medium,high예요.crossOrigin: 문자열이에요. 사용할 CORS 정책이에요. 가능한 값은anonymous와use-credentials예요.integrity: 문자열이에요. 진위를 확인하기 위한 리소스의 암호화 해시예요.nonce: 문자열이에요. 엄격한 Content Security Policy를 사용할 때 리소스를 허용하기 위한 암호화 nonce예요.fetchPriority: 문자열이에요. 리소스를 페칭하는 상대적 우선순위를 제안해요. 가능한 값은auto(기본값),high,low예요.
반환값
preinit은 아무것도 반환하지 않아요.
주의사항
- 동일한
href로preinit을 여러 번 호출하는 것은 한 번 호출하는 것과 같은 효과를 가져요. - 브라우저에서는 어떤 상황에서든
preinit을 호출할 수 있어요: 컴포넌트를 렌더링하는 동안, Effect 안에서, 이벤트 핸들러 안에서 등등. - 서버 사이드 렌더링이나 Server Components를 렌더링할 때,
preinit은 컴포넌트를 렌더링하는 동안 또는 컴포넌트 렌더링에서 시작된 비동기 context에서 호출할 때만 효과가 있어요. 다른 모든 호출은 무시될 거예요.
사용법
렌더링 중 미리 초기화하기
컴포넌트나 그 자식들이 특정 리소스를 사용할 것을 알고 있고, 리소스가 다운로드되는 즉시 평가되어 효과를 발휘하는 것이 괜찮다면, 컴포넌트를 렌더링할 때 preinit을 호출하세요.
외부 스크립트 미리 초기화하기
import { preinit } from 'react-dom';
function AppRoot() {
preinit("https://example.com/script.js", {as: "script"});
return ...;
}브라우저가 스크립트를 다운로드하되 즉시 실행하지 않기를 원한다면, 대신 preload를 사용하세요. ESM 모듈을 로드하고 싶다면, preinitModule을 사용하세요.
사용 시나리오:
import { preinit } from 'react-dom';
function AnalyticsDashboard() {
// 차트 라이브러리를 미리 다운로드하고 실행
preinit("https://cdn.example.com/chart-library.js", {as: "script"});
return (
<div>
<h1>Analytics Dashboard</h1>
{/* 차트가 여기에 렌더링될 거예요 */}
</div>
);
}스타일시트 미리 초기화하기
import { preinit } from 'react-dom';
function AppRoot() {
preinit("https://example.com/style.css", {as: "style", precedence: "medium"});
return ...;
}필수인 precedence 옵션은 문서 내에서 스타일시트의 순서를 제어할 수 있게 해줘요. 더 높은 precedence를 가진 스타일시트는 더 낮은 것을 재정의할 수 있어요.
스타일시트를 다운로드하되 즉시 문서에 삽입하지 않기를 원한다면, 대신 preload를 사용하세요.
사용 시나리오:
import { preinit } from 'react-dom';
function ThemeProvider({ children }) {
// 테마 스타일시트를 미리 다운로드하고 적용
preinit("https://cdn.example.com/dark-theme.css", {
as: "style",
precedence: "high" // 다른 스타일보다 우선순위 높게
});
return <div className="theme-dark">{children}</div>;
}precedence 값 설명:
reset: 브라우저 기본 스타일 재설정 (가장 낮은 우선순위)low: 기본 스타일medium: 컴포넌트 스타일high: 테마나 오버라이드 스타일 (가장 높은 우선순위)
이벤트 핸들러에서 미리 초기화하기
외부 리소스가 필요한 페이지나 state로 전환하기 전에 이벤트 핸들러에서 preinit을 호출하세요. 새 페이지나 state를 렌더링하는 동안 호출하는 것보다 더 일찍 프로세스를 시작할 수 있어요.
import { preinit } from 'react-dom';
function CallToAction() {
const onClick = () => {
preinit("https://example.com/wizardStyles.css", {as: "style"});
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}실제 활용 예시:
import { preinit } from 'react-dom';
function ProductGallery() {
const handleViewFullscreen = () => {
// 전체화면 뷰어 스타일을 미리 로드하고 적용
preinit("https://cdn.example.com/fullscreen-viewer.css", {
as: "style",
precedence: "high"
});
// 전체화면 뷰어 스크립트도 미리 로드하고 실행
preinit("https://cdn.example.com/fullscreen-viewer.js", {
as: "script"
});
openFullscreenViewer();
};
return (
<div>
<img src="product.jpg" alt="Product" />
<button onClick={handleViewFullscreen}>View Fullscreen</button>
</div>
);
}preinit vs preload 비교:
| 기능 | preinit | preload |
|---|---|---|
| 다운로드 | ✅ 즉시 시작 | ✅ 즉시 시작 |
| 실행/적용 | ✅ 다운로드 후 즉시 | ❌ 수동으로 해야 함 |
| 사용 시기 | 곧 바로 사용할 리소스 | 나중에 사용할 리소스 |
언제 preinit을 사용해야 할까요?
- ✅ 페이지 로드 직후 필요한 중요한 스타일시트
- ✅ 즉시 실행되어야 하는 분석 스크립트
- ✅ 사용자 인터랙션 직후 필요한 UI 컴포넌트 스타일
언제 preload를 사용해야 할까요?
- ✅ 조건부로 로드될 수 있는 리소스
- ✅ 나중에 사용될 큰 리소스
- ✅ 실행 타이밍을 직접 제어하고 싶은 스크립트
사이트맵
