reactjs · lumirlumir · Jan 5, 2025 · Jan 5, 2025 · Jan 5, 2025 · Jan 5, 2025
@@ -4,7 +4,7 @@ link: "<link>"
 
 <Intro>
 
-[브라우저 내장 `<link>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)는 스타일시트와 같은 외부 리소스를 사용하거나 링크 메타데이터로 문서를 주석 처리할 수 있게 해줍니다.
+[내장 브라우저 `<link>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)는 스타일시트와 같은 외부 리소스를 사용하거나 링크 메타데이터로 문서를 주석 처리할 수 있게 해줍니다.
 
 ```js
 <link rel="icon" href="favicon.ico" />
@@ -20,13 +20,13 @@ link: "<link>"
 
 ### `<link>` {/*link*/}
 
-스타일시트, 폰트, 아이콘과 같은 외부 리소스를 링크하거나 링크 메타데이터로 문서를 주석 처리하려면, [브라우저 내장 `<link>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)를 렌더링하세요. 어떤 컴포넌트에서든 `<link>`를 렌더링할 수 있으며, React는 [대부분의 경우](#special-rendering-behavior) 해당 DOM 요소를 `<head>`에 배치합니다.
+스타일시트, 글꼴, 아이콘과 같은 외부 리소스를 링크하거나 링크 메타데이터로 문서를 주석 처리하려면, [내장 브라우저 `<link>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)를 렌더링하세요. 어떤 컴포넌트에서든 `<link>`를 렌더링할 수 있으며, React는 [대부분의 경우](#special-rendering-behavior) 해당 DOM 요소를 `<head>`에 배치합니다.
 
 ```js
 <link rel="icon" href="favicon.ico" />
 ```
 
-[아래 더 많은 예시가 있습니다.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### Props {/*props*/}
 
@@ -43,13 +43,13 @@ link: "<link>"
 다음 속성들은 `rel=stylesheet`인 경우에 적용되지만, React의 [스타일시트에 대한 특별한 처리](#special-rendering-behavior)를 비활성화합니다.
 
 * `disabled`: 불리언 타입. 스타일시트를 비활성화합니다.
-* `onError`: 함수. 스타일시트 로드에 실패했을 때 호출됩니다.
-* `onLoad`: 함수. 스타일시트 로드가 완료되었을 때 호출됩니다.
+* `onError`: 함수. 스타일시트 불러오기에 실패했을 때 호출됩니다.
+* `onLoad`: 함수. 스타일시트 불러오기가 완료되었을 때 호출됩니다.
 
 다음 속성들은 `rel="preload"` 나 `rel="modulepreload"`인 경우에 적용됩니다.
 
 * `as`: 문자열 타입. 리소스의 유형을 지정합니다. 가능한 값은 `audio`, `document`, `embed`, `fetch`, `font`, `image`, `object`, `script`, `style`, `track`, `video`, `worker`입니다.
-* `imageSrcSet`: 문자열 타입. `as="image"`인 경우에만 적용됩니다. [이미지 소스의 세트](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)를 지정합니다.
+* `imageSrcSet`: 문자열 타입. `as="image"`인 경우에만 적용됩니다. [이미지 소스의 집합](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)을 지정합니다.
 * `imageSizes`: 문자열 타입. `as="image"`인 경우에만 적용됩니다. [이미지의 크기](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)를 지정합니다.
 
 다음 속성들은 `rel="icon"`이나 `rel="apple-touch-icon"`인 경우에 적용됩니다.
@@ -94,7 +94,7 @@ React는 `<link>` 컴포넌트에 해당하는 DOM 요소를 React 트리의 어
 
 위 특별한 처리에는 두 가지 주의 사항이 있습니다.
 
-* 링크가 렌더링 된 후에 React가 속성 변경을 무시합니다. (개발 중에 경고 메시지가 표시됩니다)
+* 링크가 렌더링 된 후에 React가 속성 변경을 무시합니다. (개발 중에 경고 메시지가 표시됩니다.)
 * 링크를 렌더링한 컴포넌트가 마운트 해제된 후에도 React는 링크를 DOM에 남길 수 있습니다.
 
 ---
@@ -103,7 +103,7 @@ React는 `<link>` 컴포넌트에 해당하는 DOM 요소를 React 트리의 어
 
 ### 관련 리소스 연결하기 {/*linking-to-related-resources*/}
 
-아이콘, 정규화된 URL, 핑백과 같은 관련 리소스에 대한 링크로 문서에 주석을 추가할 수 있습니다. React는 이 메타데이터를 React 트리의 어디에 렌더링 되든 상관없이 문서의 `<head>`에 배치합니다.
+아이콘, 정규화된 URL, 핑백<sup>Pingback</sup>과 같은 관련 리소스에 대한 링크로 문서에 주석을 추가할 수 있습니다. React는 이 메타데이터를 React 트리의 어디에 렌더링 되든 상관없이 문서의 `<head>`에 배치합니다.
 
 <SandpackWithHTMLOutput>
 
@@ -129,7 +129,7 @@ export default function BlogPage() {
 컴포넌트가 올바르게 표시되기 위해 특정 스타일시트에 의존하는 경우 해당 스타일시트에 대한 링크를 컴포넌트 내에서 렌더링할 수 있습니다. 스타일시트가 로드되는 동안 컴포넌트는 [일시 중단](/reference/react/Suspense)됩니다. `precedence` 속성을 제공해야 하며 이는 React에 이 스타일시트를 다른 스타일시트와 비교하여 어디에 배치해야 하는지 알려줍니다. 높은 우선순위의 스타일시트는 낮은 우선순위의 스타일시트를 덮어쓸 수 있습니다.
 
 <Note>
-스타일시트를 사용하고 싶을 때 [preinit](/reference/react-dom/preinit) 함수를 호출하는 것이 유용할 수 있습니다. 이 함수를 호출하면 단순히 `<link>` 컴포넌트를 렌더링하는 것보다 브라우저가 스타일시트를 더 빨리 가져올 수 있습니다. 예를 들어 [HTTP Early Hints 응답](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103)을 보내는 방식으로 가능합니다.
+스타일시트를 사용하고 싶을 때 [`preinit`](/reference/react-dom/preinit) 함수를 호출하는 것이 유용할 수 있습니다. 이 함수를 호출하면 단순히 `<link>` 컴포넌트를 렌더링하는 것보다 브라우저가 스타일시트를 더 빨리 가져올 수 있습니다. 예를 들어 [HTTP Early Hints 응답](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103)을 보내는 방식으로 가능합니다.
 </Note>
 
 <SandpackWithHTMLOutput>
@@ -151,9 +151,7 @@ export default function SiteMapPage() {
 
 ### 스타일시트 우선순위 제어하기 {/*controlling-stylesheet-precedence*/}
 
-스타일시트는 서로 충돌할 수 있으며, 이 경우 브라우저는 문서에서 나중에 오는 스타일시트를 적용합니다. React는 `precedence` 속성을 사용하여 스타일시트의 순서를 제어할 수 있도록 합니다. 이 예시에서는 세 개의 컴포넌트가 스타일시트를 렌더링하며, 더 높은 우선순위를 가진 스타일시트는 해당 컴포넌트를 더 먼저 렌더링하더라도 문서에서 나중에 배치됩니다.
-
-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*/}
+스타일시트는 서로 충돌할 수 있으며, 이 경우 브라우저는 문서에서 나중에 오는 스타일시트를 적용합니다. React는 `precedence` 속성을 사용하여 스타일시트의 순서를 제어할 수 있도록 합니다. 이 예시에서는 세 개의 컴포넌트가 스타일시트를 렌더링하며, 동일한 `precedence` 값을 가진 스타일시트는 `<head>`에서 함께 그룹화됩니다.
 
 <SandpackWithHTMLOutput>
 
@@ -189,9 +187,9 @@ function ThirdComponent() {
 
 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".
 
-### 중복으로 제거된 스타일시트 렌더링 {/*deduplicated-stylesheet-rendering*/}
+### 중복이 제거된 스타일시트 렌더링 {/*deduplicated-stylesheet-rendering*/}
 
-여러 컴포넌트에서 동일한 스타일시트를 렌더링하면 React는 문서의 head에 단일 `<link>`만 배치합니다.
+여러 컴포넌트에서 동일한 스타일시트를 렌더링하면 React는 문서의 `<head>`에 단일 `<link>`만 배치합니다.
 
 <SandpackWithHTMLOutput>
 

@@ -20,7 +20,7 @@ meta: "<meta>"
 
 ### `<meta>` {/*meta*/}
 
-문서 메타데이터를 추가하려면 [내장 브라우저 `<meta>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta)를 렌더링하십시오. 어느 컴포넌트에서나 `<meta>`를 렌더링할 수 있으며, React는 항상 해당 DOM 요소를 문서의 head에 배치합니다.
+문서 메타데이터를 추가하려면 [내장 브라우저 `<meta>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta)를 렌더링하세요. 어느 컴포넌트에서나 `<meta>`를 렌더링할 수 있으며, React는 항상 해당 DOM 요소를 문서의 `<head>`에 배치합니다.
 
 ```js
 <meta name="keywords" content="React, JavaScript, semantic markup, html" />
@@ -30,23 +30,23 @@ meta: "<meta>"
 
 #### Props {/*props*/}
 
-`<meta>`는 [모든 컴포넌트 속성](/reference/react-dom/components/common#props)을 지원합니다.
+`<meta>`는 [공통 요소 Props](/reference/react-dom/components/common#props)를 지원합니다.
 
 다음 속성 중 _하나만_ 가져야 합니다. `name`, `httpEquiv`, `charset`, `itemProp`.
 
-`<meta>` 컴포넌트는 지정된 속성에 따라 각각 다른 동작을 합니다.
+`<meta>` 컴포넌트는 지정된 Props에 따라 각각 다른 동작을 합니다.
 
 * `name`: 문자열. 문서에 첨부될 [메타데이터 종류](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name)를 지정합니다.
 * `charset`: 문자열. 문서에서 사용되는 문자 인코딩을 지원합니다. 유효한 값은 `"utf-8"` 뿐 입니다.
 * `httpEquiv`: 문자열. 문서를 처리할 지시 사항을 지정합니다.
 * `itemProp`: 문자열. 문서 전체가 아닌 문서 내 특정 항목에 대한 메타데이터를 지정합니다.
-* `content`: 문자열. `name` 또는 `itemProp` props와 함께 사용 시 첨부될 메타데이터를 지정하거나, `httpEquiv` props와 함께 사용 시 지시 사항의 동작을 지정합니다.
+* `content`: 문자열. `name` 또는 `itemProp` Props와 함께 사용 시 첨부될 메타데이터를 지정하거나, `httpEquiv` Props와 함께 사용 시 지시 사항의 동작을 지정합니다.
 
 #### 특수 렌더링 동작 {/*special-rendering-behavior*/}
 
 React는 `<meta>` 컴포넌트가 React 트리 어디에서 렌더링되든 상관없이 해당하는 DOM 요소를 항상 문서의 `<head>` 내에 배치합니다. DOM 내에서 `<head>`는 `<meta>`가 존재할 수 있는 유일한 유효한 위치이지만, 특정 페이지를 나타내는 컴포넌트가 `<meta>` 컴포넌트를 자체적으로 렌더링할 수 있다는 점이 편리하고, 구성 가능성을 유지해 줍니다.
 
-단, `<meta>`에 [`itemProp`](https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/itemprop) props가 있는 경우에는 예외입니다. 이 경우에는 문서에 대한 메타데이터가 아닌 페이지의 특정 부분에 대한 메타데이터를 나타내므로 특수한 동작이 적용되지 않습니다.
+단, `<meta>`에 [`itemProp`](https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/itemprop) Props가 있는 경우에는 예외입니다. 이 경우에는 문서에 대한 메타데이터가 아닌 페이지의 특정 부분에 대한 메타데이터를 나타내므로 특수한 동작이 적용되지 않습니다.
 
 ---
 
@@ -85,7 +85,7 @@ export default function SiteMapPage() {
 
 ### 문서 내 특정 항목에 메타데이터 추가하기 {/*annotating-specific-items-within-the-document-with-metadata*/}
 
-`itemProp` props와 함께 `<meta>` 컴포넌트를 사용하여 문서 내 특정 항목에 메타데이터를 추가할 수 있습니다. 이 경우, React는 이러한 주석을 문서내 `<head>`에 배치하지 않고, 다른 React 컴포넌트처럼 배치합니다.
+`itemProp` Props와 함께 `<meta>` 컴포넌트를 사용하여 문서 내 특정 항목에 메타데이터를 추가할 수 있습니다. 이 경우, React는 이러한 주석을 문서 내 `<head>`에 배치하지 않고, 다른 React 컴포넌트처럼 배치합니다.
 
 ```js
 <section itemScope>

@@ -4,7 +4,7 @@ title: "<option>"
 
 <Intro>
 
-[브라우저에 내장된 `<option>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option)를 사용해 [`<select>`](/reference/react-dom/components/select) 박스 안에 옵션을 렌더링할 수 있습니다.
+[내장 브라우저 `<option>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option)를 사용해 [`<select>`](/reference/react-dom/components/select) 박스 안에 옵션을 렌더링할 수 있습니다.
 
 ```js
 <select>
@@ -23,7 +23,7 @@ title: "<option>"
 
 ### `<option>` {/*option*/}
 
-[브라우저에 내장된 `<option>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option)를 사용해 [`<select>`](/reference/react-dom/components/select) 박스 안에 옵션을 렌더링할 수 있습니다.
+[내장 브라우저 `<option>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option)를 사용해 [`<select>`](/reference/react-dom/components/select) 박스 안에 옵션을 렌더링할 수 있습니다.
 
 ```js
 <select>
@@ -32,29 +32,29 @@ title: "<option>"
 </select>
 ```
 
-[아래에서 더 많은 예시를 확인하세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### Props {/*props*/}
 
-`<option>` 은 모든 [일반적인 엘리먼트 props](/reference/react-dom/components/common#props)를 지원합니다.
+`<option>`은 모든 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
 
-또한, `<option>` 은 이러한 props를 지원합니다.
+또한, `<option>`은 아래와 같은 Props를 지원합니다.
 
 * [`disabled`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option#disabled): 불리언 타입. `true`면 옵션을 선택할 수 없으며 흐리게 표시됩니다.
 * [`label`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option#label): 문자열 타입. 옵션의 의미를 지정합니다. 지정하지 않으면 옵션 내부의 텍스트가 사용됩니다.
-* [`value`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option#value): 이 옵션을 선택한 경우 [폼에서 상위 `<select>` 를 제출할 때](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form) 사용할 값입니다.
+* [`value`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option#value): 이 옵션을 선택한 경우 [폼에서 상위 `<select>`를 제출할 때](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form) 사용할 값입니다.
 
 #### 주의 사항 {/*caveats*/}
 
-* React는 `<option>`에서 `selected` 속성을 지원하지 않습니다. 대신, 이 옵션의 `value`를 제어되지 않은 select box의 경우 상위 [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option) 에 전달하거나, 제어되는 select box의 경우 [`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable) 에 전달하세요.
+* React는 `<option>`에서 `selected` 속성을 지원하지 않습니다. 대신, 이 옵션의 `value`를 제어되지 않은 `<select>` 박스의 경우 상위 [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option)에 전달하거나, 제어되는 `<select>` 박스의 경우 [`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable)에 전달하세요.
 
 ---
 
 ## 사용법 {/*usage*/}
 
-### 옵션이 포함된 select box 표시하기 {/*displaying-a-select-box-with-options*/}
+### 옵션이 포함된 `<select>` 박스 표시하기 {/*displaying-a-select-box-with-options*/}
 
-내부에 `<option>` 컴포넌트 목록이 있는 `<select>`를 렌더링하여 select box를 보여줍니다. 각 `<option>`에 양식과 함께 제출할 데이터를 나타내는 `value`를 지정하세요.
+내부에 `<option>` 컴포넌트 목록이 있는 `<select>`를 렌더링하여 `<select>` 박스를 보여줍니다. 각 `<option>`에 양식과 함께 제출할 데이터를 나타내는 `value`를 지정하세요.
 
 [`<option>` 컴포넌트 목록과 함께 `<select>`를 표시하는 방법에 대해 알아보세요.](/reference/react-dom/components/select)
 

@@ -4,7 +4,7 @@ title: "<progress>"
 
 <Intro>
 
-[브라우저 내장 컴포넌트 `<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)를 사용하면 진행률 표시기를 렌더링할 수 있습니다.
+[내장 브라우저 `<progress>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)를 사용하면 진행률 표시기를 렌더링할 수 있습니다.
 
 ```js
 <progress value={0.5} />
@@ -20,30 +20,30 @@ title: "<progress>"
 
 ### `<progress>` {/*progress*/}
 
-진행률 표시기를 표시하려면 [브라우저 내장 컴포넌트 `<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)를 렌더링합니다.
+진행률 표시기를 표시하려면 [내장 브라우저 `<progress>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)를 렌더링합니다.
 
 ```js
 <progress value={0.5} />
 ```
 
-[아래에서 더 많은 예시를 확인하세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### Props {/*props*/}
 
-`<progress>`는 모든 [일반적인 엘리먼트 props](/reference/react-dom/components/common#props)를 지원합니다.
+`<progress>`는 모든 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
 
-또한 `<progress>`는 이러한 props를 지원합니다.
+또한 `<progress>`는 아래와 같은 Props를 지원합니다.
 
 * [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max): 숫자. 최대 `value`를 지정합니다. 기본값은 `1`입니다.
-* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value): `0`에서 `최대` 사이의 숫자 또는 결정되지 않은 상태인 경우 `null`입니다. 완료된 양을 나타냅니다.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value): `0`에서 `max` 사이의 숫자 또는 결정되지 않은 상태인 경우 `null`입니다. 완료된 양을 나타냅니다.
 
 ---
 
 ## 사용법 {/*usage*/}
 
 ### 진행률 표시기 제어 {/*controlling-a-progress-indicator*/}
 
-진행률 표시기를 표시하려면 `<progress>` 컴포넌트를 렌더링합니다. `0`에서 지정한 `최대` 값 사이의 숫자 `value`를 전달할 수 있습니다. `최대`값을 전달하지 않으면 기본적으로 `1`로 간주됩니다.
+진행률 표시기를 표시하려면 `<progress>` 컴포넌트를 렌더링합니다. `0`에서 지정한 `max` 값 사이의 숫자 `value`를 전달할 수 있습니다. `max` 값을 전달하지 않으면 기본적으로 `1`로 간주됩니다.
 
 작업이 진행 중이 아닌 경우, 진행률 표시기를 불확정 상태로 설정하려면 `value={null}`을 전달합니다.