Skip to content

docs: translate <img> component reference to Korean #1588

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nococn wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: translate <img> component reference to Korean #1588

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 43 additions & 43 deletions src/content/reference/react-dom/components/img.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: "<img>"

<Intro>

The [built-in browser `<img>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) lets you embed an image.
[내장 브라우저 `<img>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/img)를 사용하면 이미지를 삽입할 수 있습니다.

```js
<img src="photo.jpg" alt="A person walking through a park" />
Expand All @@ -16,50 +16,50 @@ The [built-in browser `<img>` component](https://developer.mozilla.org/en-US/doc

---

## Reference {/*reference*/}
## 레퍼런스 {/*reference*/}

### `<img>` {/*img*/}

To display an image, render the [built-in browser `<img>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img).
이미지를 표시하려면 [내장 브라우저 `<img>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/img)를 렌더링합니다.

```js
<img src="photo.jpg" alt="A person walking through a park" />
```

[See more examples below.](#usage)
[아래 예시를 참고하세요.](#usage)

#### Props {/*props*/}

`<img>` supports all [common element props.](/reference/react-dom/components/common#common-props)

* `alt`: a string. Specifies alternative text for the image. Use an empty string for a purely decorative image.
* `crossOrigin`: a string. Specifies the [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use when fetching the image. The possible values are `anonymous` and `use-credentials`.
* `decoding`: a string. Suggests whether the browser should wait to decode the image before presenting other content. The possible values are `async`, `sync`, and `auto` (the default).
* `fetchPriority`: a string. Suggests a relative priority for fetching the image. The possible values are `high`, `low`, and `auto` (the default). During server rendering, `fetchPriority="low"` also prevents React from [automatically preloading the image.](#controlling-image-preloading-during-server-rendering)
* `height`: a number or string. Specifies the rendered height of the image.
* `loading`: a string. Specifies whether the browser should defer loading the image until it is near the viewport. The possible values are `eager` (the default) and `lazy`. Setting `loading="lazy"` prevents React from [automatically preloading the image.](#controlling-image-preloading-during-server-rendering)
* `onError`: an [event handler](/reference/react-dom/components/common#event-handler) function. Fires when the image fails to load.
* `onLoad`: an [event handler](/reference/react-dom/components/common#event-handler) function. Fires when the image finishes loading. Passing `onLoad` prevents React from [waiting for the image during a client-rendered View Transition update.](#waiting-for-an-image-during-a-view-transition)
* `referrerPolicy`: a string. Specifies the [referrer information](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy) to send when fetching the image.
* `sizes`: a string. Specifies the image sizes for different page layouts. Used with `srcSet`.
* `src`: a string. Specifies the URL of the image.
* `srcSet`: a string. Specifies one or more candidate image sources for the browser to choose from.
* `useMap`: a string. Associates the image with a [client-side image map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map).
* `width`: a number or string. Specifies the rendered width of the image.

#### Caveats {/*caveats*/}

* Do not pass an empty string to `src`. It may cause the browser to request the current page again. React warns in development and omits the attribute. To render no image, omit the `<img>` or pass `null` to `src`.
* `<img>` cannot have children or use `dangerouslySetInnerHTML`. React throws an error if you pass either.
* `fetchPriority="low"` does not stop React from waiting for the image to load and decode during a client-rendered View Transition update. Use `loading="lazy"` or an `onLoad` handler to opt out of that behavior.
`<img>`는 모든 [공통 엘리먼트 Props](/reference/react-dom/components/common#common-props)를 지원합니다.

* `alt`: 문자열. 이미지에 대한 대체 텍스트를 지정합니다. 순수하게 장식용인 이미지에는 빈 문자열을 사용하세요.
* `crossOrigin`: 문자열. 이미지를 가져올 때 사용할 [CORS 정책](https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/crossorigin)을 지정합니다. 가능한 값은 `anonymous`와 `use-credentials`입니다.
* `decoding`: 문자열. 브라우저가 다른 콘텐츠를 표시하기 전에 이미지 디코딩을 기다려야 하는지에 대한 힌트를 지정합니다. 가능한 값은 `async`, `sync`, `auto`(기본값)입니다.
* `fetchPriority`: 문자열. 이미지를 가져올 상대적 우선순위에 대한 힌트를 지정합니다. 가능한 값은 `high`, `low`, `auto`(기본값)입니다. 서버 렌더링 중에는 `fetchPriority="low"`가 React의 [자동 이미지 프리로드](#controlling-image-preloading-during-server-rendering)도 막습니다.
* `height`: 숫자 또는 문자열. 이미지가 렌더링될 높이를 지정합니다.
* `loading`: 문자열. 브라우저가 이미지가 뷰포트에 가까워질 때까지 로드를 지연해야 하는지를 지정합니다. 가능한 값은 `eager`(기본값)와 `lazy`입니다. `loading="lazy"`를 설정하면 React의 [자동 이미지 프리로드](#controlling-image-preloading-during-server-rendering)가 적용되지 않습니다.
* `onError`: [이벤트 핸들러](/reference/react-dom/components/common#event-handler) 함수. 이미지 로드에 실패했을 때 호출됩니다.
* `onLoad`: [이벤트 핸들러](/reference/react-dom/components/common#event-handler) 함수. 이미지 로드가 완료되었을 때 호출됩니다. `onLoad`를 전달하면 클라이언트에서 렌더링되는 View Transition 업데이트 중에 React가 [이미지를 기다리지 않습니다](#waiting-for-an-image-during-a-view-transition).
* `referrerPolicy`: 문자열. 이미지를 가져올 때 보낼 [리퍼러 정보](https://developer.mozilla.org/ko/docs/Web/HTML/Element/img#referrerpolicy)를 지정합니다.
* `sizes`: 문자열. 다양한 페이지 레이아웃에 대한 이미지 크기를 지정합니다. `srcSet`과 함께 사용합니다.
* `src`: 문자열. 이미지의 URL을 지정합니다.
* `srcSet`: 문자열. 브라우저가 선택할 수 있는 하나 이상의 후보 이미지 소스를 지정합니다.
* `useMap`: 문자열. 이미지를 [클라이언트 측 이미지 맵](https://developer.mozilla.org/ko/docs/Web/HTML/Element/map)과 연결합니다.
* `width`: 숫자 또는 문자열. 이미지가 렌더링될 너비를 지정합니다.

#### 주의 사항 {/*caveats*/}

* `src`에 빈 문자열을 전달하지 마세요. 브라우저가 현재 페이지를 다시 요청할 수 있습니다. React는 개발 환경에서 경고하고 해당 어트리뷰트를 생략합니다. 이미지를 렌더링하지 않으려면 `<img>`를 생략하거나 `src`에 `null`을 전달하세요.
* `<img>`는 자식을 가질 수 없고 `dangerouslySetInnerHTML`도 사용할 수 없습니다. 둘 중 하나라도 전달하면 React는 오류를 발생시킵니다.
* `fetchPriority="low"`는 클라이언트에서 렌더링되는 View Transition 업데이트 중에 React가 이미지의 로드와 디코딩을 기다리는 것을 막지 않습니다. 이 동작을 해제하려면 `loading="lazy"` 또는 `onLoad` 핸들러를 사용하세요.

---

## Usage {/*usage*/}
## 사용법 {/*usage*/}

### Displaying an image {/*displaying-an-image*/}
### 이미지 표시하기 {/*displaying-an-image*/}

Pass the image URL to `src` and a text description to `alt`:
이미지 URL을 `src`에, 텍스트 설명을 `alt`에 전달하세요.

<Sandpack>

Expand All @@ -85,15 +85,15 @@ img {

</Sandpack>

Specify `width` and `height` when you know the image dimensions so the browser can reserve space before the image loads. For a decorative image, pass `alt=""` so that screen readers ignore it.
이미지의 크기를 알고 있다면 `width`와 `height`를 지정하여 브라우저가 이미지가 로드되기 전에 공간을 확보할 수 있도록 하세요. 장식용 이미지라면 스크린 리더가 무시할 수 있도록 `alt=""`를 전달하세요.

---

### Controlling image preloading during server rendering {/*controlling-image-preloading-during-server-rendering*/}
### 서버 렌더링 중 이미지 프리로드 제어하기 {/*controlling-image-preloading-during-server-rendering*/}

During server rendering, React automatically generates a preload hint for an `<img>` by default. This can let the browser start fetching the image before it encounters the `<img>` in the rendered HTML.
서버 렌더링 중에 React는 기본적으로 `<img>`에 대한 프리로드 힌트를 자동으로 생성합니다. 이를 통해 브라우저가 렌더링된 HTML에서 `<img>`를 만나기 전에 이미지 가져오기를 시작할 수 있습니다.

Add `loading="lazy"` or `fetchPriority="low"` to an image that should not receive this hint:
이 힌트를 받지 않아야 하는 이미지에는 `loading="lazy"` 또는 `fetchPriority="low"`를 추가하세요.

```js
function ProductPage() {
Expand All @@ -107,31 +107,31 @@ function ProductPage() {
}
```

In this example, React generates a preload hint only for `hero.jpg`. Depending on the server API or framework, React may render the equivalent of this element:
이 예시에서 React는 `hero.jpg`에 대해서만 프리로드 힌트를 생성합니다. 서버 API나 프레임워크에 따라 React는 다음 엘리먼트에 해당하는 결과를 렌더링할 수 있습니다.

```html
<link rel="preload" as="image" href="hero.jpg" />
```

React may instead provide the same hint in a `Link` response header. The other two images keep their `loading` and `fetchPriority` props in the rendered HTML, but React does not generate preload hints for them. The `loading="lazy"` prop asks the browser to defer loading an image until it approaches the viewport. The `fetchPriority="low"` prop allows the image to load immediately, but tells the browser to fetch it at a lower priority.
React는 대신 `Link` 응답 헤더로 동일한 힌트를 제공할 수도 있습니다. 나머지 두 이미지는 렌더링된 HTML에서 `loading`과 `fetchPriority` props를 그대로 유지하지만, React는 이들에 대한 프리로드 힌트를 생성하지 않습니다. `loading="lazy"` prop은 브라우저에 이미지가 뷰포트에 가까워질 때까지 로드를 지연하도록 요청합니다. `fetchPriority="low"` prop은 이미지가 즉시 로드될 수 있도록 허용하면서도, 브라우저에 더 낮은 우선순위로 가져오도록 지시합니다.

React also does not automatically preload an image when it is inside a `<picture>` or `<noscript>` element, or when its `src` or `srcSet` is a data URL.
이미지가 `<picture>`나 `<noscript>` 엘리먼트 안에 있는 경우, 또는 `src` 또는 `srcSet`이 데이터 URL인 경우에도 React는 이미지를 자동으로 프리로드하지 않습니다.

If you render an image through a framework or a component library, consult its documentation for the default behavior. React decides whether to generate an automatic preload from the props of the underlying `<img>`. For example, an image component may add `loading="lazy"` by default and provide a separate option for explicitly preloading selected images.
프레임워크나 컴포넌트 라이브러리를 통해 이미지를 렌더링하는 경우에는 해당 문서에서 기본 동작을 확인하세요. React는 내부적인 `<img>`의 props를 기반으로 자동 프리로드 생성 여부를 결정합니다. 예를 들어 어떤 이미지 컴포넌트는 기본적으로 `loading="lazy"`를 추가하고, 선택한 이미지를 명시적으로 프리로드하는 별도의 옵션을 제공할 수 있습니다.

To create an explicit preload hint, call [`preload`](/reference/react-dom/preload).
명시적인 프리로드 힌트를 만들려면 [`preload`](/reference/react-dom/preload)를 호출하세요.

---

### Waiting for an image during a View Transition {/*waiting-for-an-image-during-a-view-transition*/}
### View Transition 중 이미지 기다리기 {/*waiting-for-an-image-during-a-view-transition*/}

During a client-rendered [`<ViewTransition>`](/reference/react/ViewTransition) update, React may wait for an image to load and decode before starting the animation. This applies when a new `<img>` with a non-empty `src` is rendered, or when an existing image's `src` or `srcSet` changes. The image must be inside the `<ViewTransition>` subtree and must not have `loading="lazy"` or an `onLoad` handler. React does not wait for images during synchronous updates.
클라이언트에서 렌더링되는 [`<ViewTransition>`](/reference/react/ViewTransition) 업데이트 중에 React는 애니메이션을 시작하기 전에 이미지가 로드되고 디코딩될 때까지 기다릴 수 있습니다. 이는 비어있지 않은 `src`를 가진 새로운 `<img>`가 렌더링되거나, 기존 이미지의 `src` 또는 `srcSet`이 변경될 때 적용됩니다. 이미지는 `<ViewTransition>` 하위 트리 안에 있어야 하며 `loading="lazy"`나 `onLoad` 핸들러가 없어야 합니다. React는 동기 업데이트 중에는 이미지를 기다리지 않습니다.

When a Suspense boundary reveals streamed content inside a `<ViewTransition>`, React may also wait for visible images with a non-empty `src` that do not have `loading="lazy"`. React stops waiting after a timeout so that a slow image does not block the update indefinitely.
Suspense 경계가 `<ViewTransition>` 내부에서 스트리밍된 콘텐츠를 표시할 때, React는 `loading="lazy"`가 없고 비어있지 않은 `src`를 가진 보이는 이미지들도 기다릴 수 있습니다. 느린 이미지가 업데이트를 무한정 막지 않도록, React는 타임아웃 후에 기다리기를 중단합니다.

In this example, the Suspense boundary is wrapped in a `<ViewTransition>` and shows a profile skeleton until the portrait has loaded.
이 예시에서 Suspense 경계는 `<ViewTransition>`으로 감싸져 있고, 인물 사진이 로드될 때까지 프로필 스켈레톤을 보여줍니다.

For comparison, the second button inserts the same card directly into the DOM. The card appears immediately, and the browser displays the image after it loads:
비교를 위해, 두 번째 버튼은 동일한 카드를 DOM에 직접 삽입합니다. 카드는 즉시 나타나고, 브라우저는 이미지가 로드된 후에 이미지를 표시합니다.

<Sandpack>

Expand Down
Loading