무엇
<link>은 파비콘·스타일시트·프리로드 같은 외부 리소스를 문서에 연결하는 요소다. React 19부터는 컴포넌트 트리 어디에 렌더하든 React가 자동으로 문서의 <head>로 올려 준다.
rel과 href가 기본이다. 본문 컴포넌트 안에 두어도 최종 DOM에서는 <head>에 들어간다.
export function BlogPage() {
return (
<>
<link rel="icon" href="/favicon.ico" />
<h1>블로그</h1>
</>
)
}
무슨 일이 일어나나
React는 렌더된 <link>를 <head>로 끌어올린다(hoisting). 덕분에 리소스 링크를 그 리소스가 필요한 컴포넌트 곁에 둘 수 있다. 다만 몇 경우엔 올리지 않고 자리에 그대로 둔다: precedence 없는 rel="stylesheet", itemProp이 붙은 링크(구조화 데이터라 인라인 유지), 그리고 onLoad·onError·disabled로 로딩을 직접 관리하는 경우다.
rel="stylesheet"에 precedence를 주면 React가 특별히 다룬다. 스타일시트가 로드되는 동안 컴포넌트가 서스펜드되고, 같은 href는 하나로 중복 제거되며, precedence 값이 <head> 안의 순서를 정한다. 값 자체는 임의 문자열이고, 먼저 발견된 쪽이 낮은 우선순위, 나중이 높은 우선순위라 뒤 것이 앞 것을 덮어쓸 수 있다.
사용법
스타일시트를 컴포넌트 곁에서 선언하되 순서를 통제하려면 precedence를 쓴다. 여러 컴포넌트가 같은 파일을 링크해도 최종 DOM에는 하나만 남는다.
function Sidebar() {
return (
<>
<link rel="stylesheet" href="/sidebar.css" precedence="default" />
<aside>…</aside>
</>
)
}
function Widget() {
// 같은 href — 중복 제거돼 <head>엔 하나만 남는다
return <link rel="stylesheet" href="/sidebar.css" precedence="default" />
}
precedence를 다르게 주면 순서가 갈린다. 낮은 값이 먼저, 높은 값이 뒤에 놓여 뒤 것이 우선한다.
<link rel="stylesheet" href="/base.css" precedence="low" />
<link rel="stylesheet" href="/theme.css" precedence="high" /> // base를 덮어쓸 수 있음
실무 예시
폰트나 중요한 리소스를 미리 받아두려면 rel="preload"를 쓴다. as로 종류를, 교차 출처면 crossOrigin을 함께 준다.
export function PreloadFont() {
return (
<link
rel="preload"
as="font"
href="/fonts/pretendard-subset.woff2"
type="font/woff2"
crossOrigin="anonymous"
/>
)
}
왜 중요한가
예전에는 스타일시트·파비콘·프리로드 링크를 별도의 head 관리 도구나 프레임워크 메커니즘으로 다뤘다. React 19의 hoisting은 이 링크를 정말 필요한 컴포넌트 곁에 둘 수 있게 해서, 리소스와 그 소비처의 거리를 좁힌다. 특히 precedence로 스타일시트 순서와 서스펜스 로딩까지 React가 맡는 점이 실전에서 유용하다. 다만 Next.js 같은 프레임워크는 자체 메타데이터·스타일 처리 계층을 두는 경우가 많아, 실제로 이 기능을 날것으로 쓰는지는 스택에 따라 다르다.
Reference