Preload (<PreloadResource /> 컴포넌트)

#27PerformanceEasy

Preload (<PreloadResource /> 컴포넌트)

Preload — Critical 자원 hint 컴포넌트

페이지의 LCP(Largest Contentful Paint)에 영향을 주는 hero 이미지나 웹폰트처럼, critical 자원을 브라우저에게 미리 알려주는 컴포넌트를 만드세요. <link rel="preload" as="..." href="..."> 가 핵심 — 브라우저가 즉시·고우선순위로 가져옵니다.

요구사항

<PreloadResource href as /> 컴포넌트는 마운트 시 document.head 에 <link rel="preload" as={as} href={href}> 를 삽입
as 가 'font' 이면 자동으로 crossOrigin="anonymous" 속성 추가 (웹폰트 CORS 요구사항)
같은 href 가 이미 head에 있으면 중복 삽입 안 함
href 가 변경되면 새 link 추가 (이전 건 그대로 둠 — preload는 cancel이 의미 없음)
컴포넌트는 DOM에 아무것도 렌더하지 않음 (return null)

힌트

useEffect(() => { ... }, [href, as])
document.head.querySelector('link[rel="preload"][href="..."]') 로 중복 체크
link.setAttribute('crossorigin', 'anonymous')

학습 포인트

<link rel="preload"> 가 <link rel="prefetch"> 와 어떻게 다른지 (critical, immediate, high-priority vs idle, predicted)
as 속성의 역할 — 자원 타입을 알려야 브라우저가 올바른 priority 부여
폰트의 crossorigin 요구사항 (CORS preflight 회피)

import { useEffect } from 'react';

type PreloadAs = 'font' | 'image' | 'style' | 'script';

export function PreloadResource({ href, as }: { href: string; as: PreloadAs }) {
  useEffect(() => {
    // TODO:
    //   1) document.head에 이미 link[rel="preload"][href={href}] 가 있으면 return
    //   2) <link rel="preload" as={as} href={href}> 생성
    //   3) as === 'font' 이면 crossorigin="anonymous" 속성 추가
    //   4) document.head.appendChild(link)
    throw new Error('Not implemented');
  }, [href, as]);

  return null;
}

Open Sandbox

Sandpack 로드 중…