Skip to content

Commit 2bc4bdc

Browse files
lumirlumirlumirlumir
committed
docs: update link.md 
1 parent bdd4b47 commit 2bc4bdc

File tree

1 file changed

+12
-14
lines changed
  • src/content/reference/react-dom/components

1 file changed

+12
-14
lines changed

‎src/content/reference/react-dom/components/link.md‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ link: "<link>"
44

55
<Intro>
66

7-
[브라우저 내장 `<link>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)는 스타일시트와 같은 외부 리소스를 사용하거나 링크 메타데이터로 문서를 주석 처리할 수 있게 해줍니다.
7+
[내장 브라우저 `<link>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)는 스타일시트와 같은 외부 리소스를 사용하거나 링크 메타데이터로 문서를 주석 처리할 수 있게 해줍니다.
88

99
```js
1010
<link rel="icon" href="favicon.ico" />
@@ -20,13 +20,13 @@ link: "<link>"
2020

2121
### `<link>` {/*link*/}
2222

23-
스타일시트, 폰트, 아이콘과 같은 외부 리소스를 링크하거나 링크 메타데이터로 문서를 주석 처리하려면, [브라우저 내장 `<link>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)를 렌더링하세요. 어떤 컴포넌트에서든 `<link>`를 렌더링할 수 있으며, React는 [대부분의 경우](#special-rendering-behavior) 해당 DOM 요소를 `<head>`에 배치합니다.
23+
스타일시트, 글꼴, 아이콘과 같은 외부 리소스를 링크하거나 링크 메타데이터로 문서를 주석 처리하려면, [내장 브라우저 `<link>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)를 렌더링하세요. 어떤 컴포넌트에서든 `<link>`를 렌더링할 수 있으며, React는 [대부분의 경우](#special-rendering-behavior) 해당 DOM 요소를 `<head>`에 배치합니다.
2424

2525
```js
2626
<link rel="icon" href="favicon.ico" />
2727
```
2828

29-
[아래 더 많은 예시가 있습니다.](#usage)
29+
[아래 예시를 참고하세요.](#usage)
3030

3131
#### Props {/*props*/}
3232

@@ -43,13 +43,13 @@ link: "<link>"
4343
다음 속성들은 `rel=stylesheet`인 경우에 적용되지만, React의 [스타일시트에 대한 특별한 처리](#special-rendering-behavior)를 비활성화합니다.
4444

4545
* `disabled`: 불리언 타입. 스타일시트를 비활성화합니다.
46-
* `onError`: 함수. 스타일시트 로드에 실패했을 때 호출됩니다.
47-
* `onLoad`: 함수. 스타일시트 로드가 완료되었을 때 호출됩니다.
46+
* `onError`: 함수. 스타일시트 불러오기에 실패했을 때 호출됩니다.
47+
* `onLoad`: 함수. 스타일시트 불러오기가 완료되었을 때 호출됩니다.
4848

4949
다음 속성들은 `rel="preload"` 나 `rel="modulepreload"`인 경우에 적용됩니다.
5050

5151
* `as`: 문자열 타입. 리소스의 유형을 지정합니다. 가능한 값은 `audio`, `document`, `embed`, `fetch`, `font`, `image`, `object`, `script`, `style`, `track`, `video`, `worker`입니다.
52-
* `imageSrcSet`: 문자열 타입. `as="image"`인 경우에만 적용됩니다. [이미지 소스의 세트](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)를 지정합니다.
52+
* `imageSrcSet`: 문자열 타입. `as="image"`인 경우에만 적용됩니다. [이미지 소스의 집합](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)을 지정합니다.
5353
* `imageSizes`: 문자열 타입. `as="image"`인 경우에만 적용됩니다. [이미지의 크기](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)를 지정합니다.
5454

5555
다음 속성들은 `rel="icon"`이나 `rel="apple-touch-icon"`인 경우에 적용됩니다.
@@ -94,7 +94,7 @@ React는 `<link>` 컴포넌트에 해당하는 DOM 요소를 React 트리의 어
9494

9595
위 특별한 처리에는 두 가지 주의 사항이 있습니다.
9696

97-
* 링크가 렌더링 된 후에 React가 속성 변경을 무시합니다. (개발 중에 경고 메시지가 표시됩니다)
97+
* 링크가 렌더링 된 후에 React가 속성 변경을 무시합니다. (개발 중에 경고 메시지가 표시됩니다.)
9898
* 링크를 렌더링한 컴포넌트가 마운트 해제된 후에도 React는 링크를 DOM에 남길 수 있습니다.
9999

100100
---
@@ -103,7 +103,7 @@ React는 `<link>` 컴포넌트에 해당하는 DOM 요소를 React 트리의 어
103103

104104
### 관련 리소스 연결하기 {/*linking-to-related-resources*/}
105105

106-
아이콘, 정규화된 URL, 핑백과 같은 관련 리소스에 대한 링크로 문서에 주석을 추가할 수 있습니다. React는 이 메타데이터를 React 트리의 어디에 렌더링 되든 상관없이 문서의 `<head>`에 배치합니다.
106+
아이콘, 정규화된 URL, 핑백<sup>Pingback</sup>과 같은 관련 리소스에 대한 링크로 문서에 주석을 추가할 수 있습니다. React는 이 메타데이터를 React 트리의 어디에 렌더링 되든 상관없이 문서의 `<head>`에 배치합니다.
107107

108108
<SandpackWithHTMLOutput>
109109

@@ -129,7 +129,7 @@ export default function BlogPage() {
129129
컴포넌트가 올바르게 표시되기 위해 특정 스타일시트에 의존하는 경우 해당 스타일시트에 대한 링크를 컴포넌트 내에서 렌더링할 수 있습니다. 스타일시트가 로드되는 동안 컴포넌트는 [일시 중단](/reference/react/Suspense)됩니다. `precedence` 속성을 제공해야 하며 이는 React에 이 스타일시트를 다른 스타일시트와 비교하여 어디에 배치해야 하는지 알려줍니다. 높은 우선순위의 스타일시트는 낮은 우선순위의 스타일시트를 덮어쓸 수 있습니다.
130130

131131
<Note>
132-
스타일시트를 사용하고 싶을 때 [preinit](/reference/react-dom/preinit) 함수를 호출하는 것이 유용할 수 있습니다. 이 함수를 호출하면 단순히 `<link>` 컴포넌트를 렌더링하는 것보다 브라우저가 스타일시트를 더 빨리 가져올 수 있습니다. 예를 들어 [HTTP Early Hints 응답](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103)을 보내는 방식으로 가능합니다.
132+
스타일시트를 사용하고 싶을 때 [`preinit`](/reference/react-dom/preinit) 함수를 호출하는 것이 유용할 수 있습니다. 이 함수를 호출하면 단순히 `<link>` 컴포넌트를 렌더링하는 것보다 브라우저가 스타일시트를 더 빨리 가져올 수 있습니다. 예를 들어 [HTTP Early Hints 응답](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103)을 보내는 방식으로 가능합니다.
133133
</Note>
134134

135135
<SandpackWithHTMLOutput>
@@ -151,9 +151,7 @@ export default function SiteMapPage() {
151151

152152
### 스타일시트 우선순위 제어하기 {/*controlling-stylesheet-precedence*/}
153153

154-
스타일시트는 서로 충돌할 수 있으며, 이 경우 브라우저는 문서에서 나중에 오는 스타일시트를 적용합니다. React는 `precedence` 속성을 사용하여 스타일시트의 순서를 제어할 수 있도록 합니다. 이 예시에서는 세 개의 컴포넌트가 스타일시트를 렌더링하며, 더 높은 우선순위를 가진 스타일시트는 해당 컴포넌트를 더 먼저 렌더링하더라도 문서에서 나중에 배치됩니다.
155-
156-
Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the `<head>`. {/*TODO*/}
154+
스타일시트는 서로 충돌할 수 있으며, 이 경우 브라우저는 문서에서 나중에 오는 스타일시트를 적용합니다. React는 `precedence` 속성을 사용하여 스타일시트의 순서를 제어할 수 있도록 합니다. 이 예시에서는 세 개의 컴포넌트가 스타일시트를 렌더링하며, 동일한 `precedence` 값을 가진 스타일시트는 `<head>`에서 함께 그룹화됩니다.
157155

158156
<SandpackWithHTMLOutput>
159157

@@ -189,9 +187,9 @@ function ThirdComponent() {
189187

190188
Note the `precedence` values themselves are arbitrary and their naming is up to you. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher".
191189

192-
### 중복으로 제거된 스타일시트 렌더링 {/*deduplicated-stylesheet-rendering*/}
190+
### 중복이 제거된 스타일시트 렌더링 {/*deduplicated-stylesheet-rendering*/}
193191

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

196194
<SandpackWithHTMLOutput>
197195

0 commit comments

Comments
 (0)