원문: https://react.dev/reference/react-dom/components/link

컴포넌트

내장 브라우저 <link> 컴포넌트는 스타일시트와 같은 외부 리소스를 사용하거나 링크 메타데이터로 문서를 주석 처리할 수 있게 해줍니다.

<link rel="icon" href="favicon.ico" />

레퍼런스
사용법
- 관련 리소스 연결하기
- 스타일시트 연결하기
- 스타일시트 우선순위 제어하기
- 중복이 제거된 스타일시트 렌더링
- 문서 내 특정 항목에 링크로 주석 달기

레퍼런스

`<link>`

스타일시트, 글꼴, 아이콘 등 외부 리소스를 링크하거나 링크 메타데이터로 문서를 주석 처리하려면 내장 브라우저 <link> 컴포넌트를 렌더링하세요. 어떤 컴포넌트에서든 <link>를 렌더링할 수 있으며, React는 대부분의 경우 해당 DOM 요소를 <head>에 배치합니다.

<link rel="icon" href="favicon.ico" />

아래 예시를 참고하세요.

Props

<link>는 모든 공통 요소 속성을 지원합니다.

rel: 문자열, 필수. 리소스와의 관계를 지정합니다. React는 rel="stylesheet" 링크를 특별하게 처리합니다.

rel="stylesheet"인 경우 적용되는 속성:

precedence: 문자열. <link> DOM 노드를 문서 <head> 내에서 다른 요소와 비교해 순위를 지정합니다. 이를 통해 어떤 스타일시트가 다른 스타일시트를 덮어쓸 수 있는지 결정합니다. 값은 임의로 정할 수 있으며, React는 먼저 발견한 precedence 값을 "낮음", 나중에 발견한 값을 "높음"으로 간주합니다. 동일한 precedence를 가진 스타일시트는 <link>, 인라인 <style>, preinit 함수 등으로 로드되어도 함께 그룹화됩니다.
media: 문자열. 스타일시트를 특정 미디어 쿼리에 제한합니다.
title: 문자열. 대체 스타일시트의 이름을 지정합니다.

rel="stylesheet"이면서 React의 특별 처리를 비활성화하는 속성:

disabled: 불리언. 스타일시트를 비활성화합니다.
onError: 함수. 스타일시트 불러오기에 실패했을 때 호출됩니다.
onLoad: 함수. 스타일시트 불러오기가 완료되었을 때 호출됩니다.

rel="preload" 또는 rel="modulepreload"인 경우:

as: 문자열. 리소스의 유형. 가능한 값: audio, document, embed, fetch, font, image, object, script, style, track, video, worker 등.
imageSrcSet: 문자열. as="image"일 때만 적용. 이미지 소스셋 지정.
imageSizes: 문자열. as="image"일 때만 적용. 이미지 크기 지정.

rel="icon" 또는 rel="apple-touch-icon"인 경우:

sizes: 문자열. 아이콘의 크기 지정.

모든 경우에 적용되는 속성:

href: 문자열. 연결된 리소스의 URL.
crossOrigin: 문자열. 사용할 CORS 정책. anonymous 또는 use-credentials.
referrerPolicy: 문자열. 리소스를 가져올 때 보낼 Referrer 헤더. 기본값은 no-referrer-when-downgrade.
fetchPriority: 문자열. 리소스 가져오기 우선순위. auto(기본값), high, low.
hrefLang: 문자열. 연결된 리소스의 언어.
integrity: 문자열. 리소스의 암호 해시로 진위 확인.
type: 문자열. 연결된 리소스의 MIME 유형.

React에서 권장하지 않는 속성:

blocking: 문자열. "render"로 설정하면 스타일시트가 로드될 때까지 브라우저가 페이지를 렌더링하지 않도록 지시합니다. React는 Suspense로 더 세밀하게 제어할 수 있습니다.

특별한 렌더링 동작

React는 <link> 컴포넌트에 해당하는 DOM 요소를 React 트리의 어디에 렌더링하든 항상 문서의 <head>에 배치합니다. <head>는 DOM 내에서 <link>가 위치할 수 있는 유일한 위치이지만, 특정 페이지를 나타내는 컴포넌트가 <link>를 자체적으로 렌더링할 수 있다면 편리하고 구성이 용이합니다.

예외:

<link>에 rel="stylesheet"가 있으면 반드시 precedence 속성이 있어야 특별 동작이 적용됩니다. precedence가 없으면 특별 동작 없음.
<link>에 itemProp이 있으면 특별 동작 없음. 이 경우 문서 전체가 아니라 특정 부분의 메타데이터로 취급합니다.
<link>에 onLoad 또는 onError가 있으면 특별 동작 없음. 이 경우 리소스 로딩을 수동으로 관리합니다.

스타일시트에 대한 특별 동작

<link rel="stylesheet">를 렌더링하는 컴포넌트는 스타일시트가 로드되는 동안 일시 중단됩니다.
여러 컴포넌트가 동일한 스타일시트에 대한 링크를 렌더링하면 React는 중복된 링크를 제거하고 DOM에 단일 링크만 배치합니다. 두 링크는 href가 같으면 동일하게 간주합니다.

예외:

precedence가 없으면 특별 동작 없음.
onLoad, onError, disabled가 있으면 특별 동작 없음.

주의사항:

링크가 렌더링된 후 React는 props 변경을 무시합니다(개발 환경에서는 경고).
링크를 렌더링한 컴포넌트가 언마운트되어도 React는 링크를 DOM에 남길 수 있습니다.

사용법

스타일시트 연결하기

컴포넌트가 올바르게 표시되기 위해 특정 스타일시트에 의존하는 경우, 해당 스타일시트에 대한 링크를 컴포넌트 내에서 렌더링할 수 있습니다. 스타일시트가 로드되는 동안 컴포넌트는 일시 중단됩니다. 반드시 precedence 속성을 제공해야 하며, 이는 React에 이 스타일시트를 다른 스타일시트와 비교해 어디에 배치해야 하는지 알려줍니다. 높은 우선순위의 스타일시트는 낮은 우선순위의 스타일시트를 덮어쓸 수 있습니다.

참고: 스타일시트를 사용할 때 preinit 함수를 호출하면 브라우저가 스타일시트를 더 빨리 가져올 수 있습니다. 예를 들어 HTTP Early Hints 응답을 보내는 방식 등.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function SiteMapPage() {
  return (
    <ShowRenderedHTML>
      <link rel="stylesheet" href="sitemap.css" precedence="medium" />
      <p>...</p>
    </ShowRenderedHTML>
  );
}

스타일시트 우선순위 제어하기

스타일시트는 서로 충돌할 수 있으며, 이 경우 브라우저는 문서에서 나중에 오는 스타일시트를 적용합니다. React는 precedence 속성을 사용해 스타일시트의 순서를 제어할 수 있습니다. 아래 예시에서는 세 개의 컴포넌트가 스타일시트를 렌더링하며, 동일한 precedence 값을 가진 스타일시트는 <head>에서 함께 그룹화됩니다.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function HomePage() {
  return (
    <ShowRenderedHTML>
      <FirstComponent />
      <SecondComponent />
      <ThirdComponent />
      ...
    </ShowRenderedHTML>
  );
}

function FirstComponent() {
  return <link rel="stylesheet" href="first.css" precedence="first" />;
}

function SecondComponent() {
  return <link rel="stylesheet" href="second.css" precedence="second" />;
}

function ThirdComponent() {
  return <link rel="stylesheet" href="third.css" precedence="first" />;
}

참고: precedence 값은 임의로 정할 수 있으며, React는 먼저 발견한 precedence 값을 "낮음", 나중에 발견한 값을 "높음"으로 간주합니다.

중복이 제거된 스타일시트 렌더링

여러 컴포넌트에서 동일한 스타일시트를 렌더링하면 React는 문서의 <head>에 단일 <link>만 배치합니다.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function HomePage() {
  return (
    <ShowRenderedHTML>
      <Component />
      <Component />
      ...
    </ShowRenderedHTML>
  );
}

function Component() {
  return <link rel="stylesheet" href="styles.css" precedence="medium" />;
}

문서 내 특정 항목에 링크로 주석 달기

itemProp 속성을 사용해 <link> 컴포넌트를 문서 내 특정 항목에 관련 리소스 링크로 주석을 달 수 있습니다. 이 경우 React는 이러한 주석을 문서의 <head>에 배치하지 않고 다른 React 컴포넌트와 같이 배치합니다.

<section itemScope>
  <h3>특정 항목에 주석 달기</h3>
  <link itemProp="author" href="http://example.com/" />
  <p>...</p>
</section>

출처: https://react.dev/reference/react-dom/components/link

저작자표시 (새창열림)

[react 번역] <link> 컴포넌트