diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 52e780b96..6059bfe6a 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -1,6 +1,6 @@ --- id: dom-elements -title: DOM Elements +title: DOM 엘리먼트 layout: docs category: Reference permalink: docs/dom-elements.html @@ -14,27 +14,28 @@ redirect_from: - "tips/dangerously-set-inner-html.html" --- -React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations. +React는 성능 및 브라우저 간 호환성을 위해 브라우저의 독립적인 DOM 시스템을 구현합니다. React에서는 브라우저의 DOM 구현에서 몇 가지 어려운 부분을 정리할 수가 있었습니다. -In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute `tabindex` corresponds to the attribute `tabIndex` in React. The exception is `aria-*` and `data-*` attributes, which should be lowercased. For example, you can keep `aria-label` as `aria-label`. +React에서 모든 프로퍼티 및 어트리뷰트(이벤트 핸들러 포함)은 캐멀 케이스를 사용합니다. +예를 들어 HTML 어트리뷰트인 `tabindex`는 React의 `tabIndex`으로 표현합니다. 예외는 `aria-*` 및 `data-*` 어트리뷰트입니다. 이는 소문자로 표현합니다. 예를 들어, `aria-label`은 `aria-label`로 동일하게 유지됩니다. -## Differences In Attributes {#differences-in-attributes} +## 어트리뷰트의 차이 {#differences-in-attributes} -There are a number of attributes that work differently between React and HTML: +React와 HTML 사이에는 다르게 작동하는 여러가지의 어트리뷰트들이 있습니다. ### checked {#checked} -The `checked` attribute is supported by `` components of type `checkbox` or `radio`. You can use it to set whether the component is checked. This is useful for building controlled components. `defaultChecked` is the uncontrolled equivalent, which sets whether the component is checked when it is first mounted. +`checked` 어트리뷰트는 `checkbox` 또는 `radio` 타입의 `` 컴포넌트에 의해 지원됩니다. 이 어트리뷰트를 사용해서 컴포넌트의 선택 여부를 설정할 수 있습니다. 이는 제어 컴포넌트를 만들 때 유용합니다. `defaultChecked`는 비제어 컴포넌트가 사용되는 동등한 의미를 가지는 어트리뷰트이며 컴포넌트가 처음 마운트될 때 선택 여부를 설정합니다. ### className {#classname} -To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `
`, ``, and others. +CSS class를 사용하려면 `className` 어트리뷰트를 사용하세요. 이는 `
`, `` 등과 같은 모든 일반적인 DOM 및 SVG 엘리먼트에 적용됩니다. -If you use React with Web Components (which is uncommon), use the `class` attribute instead. +일반적이진 않지만, React를 웹 컴포넌트에 사용하는 경우 `class` 어트리뷰트를 사용하세요. ### dangerouslySetInnerHTML {#dangerouslysetinnerhtml} -`dangerouslySetInnerHTML` is React's replacement for using `innerHTML` in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. So, you can set HTML directly from React, but you have to type out `dangerouslySetInnerHTML` and pass an object with a `__html` key, to remind yourself that it's dangerous. For example: +`dangerouslySetInnerHTML`은 브라우저 DOM에서 `innerHTML`을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 [사이트 간 스크립팅](https://ko.wikipedia.org/wiki/사이트_간_스크립팅) 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 `dangerouslySetInnerHTML`을 작성하고 `__html` 키로 객체를 전달해야 합니다. 아래는 예시입니다. ```js function createMarkup() { @@ -48,23 +49,24 @@ function MyComponent() { ### htmlFor {#htmlfor} -Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead. +`for`는 JavaScript에서 예약어이므로 React 엘리먼트는 `htmlFor`를 대신 사용합니다. ### onChange {#onchange} -The `onChange` event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to handle user input in real time. +`onChange` 이벤트는 예상한대로 폼 필드가 변경될 때 이벤트가 발생합니다. 의도적으로 기존 브라우저의 동작을 사용하지 않는데 `onChange`는 이러한 동작에 대해 잘못된 명칭이며 React는 실시간으로 유저 입력을 처리하는 이벤트에 의존하기 때문입니다. + ### selected {#selected} -The `selected` attribute is supported by `
``` -Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg `zoom`, `order`, `flex`). A complete list of unitless properties can be seen [here](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59). +모든 스타일 프로퍼티가 픽셀 문자열로 변환되는 것은 아닙니다. 어떤 속성들은 단위가 없습니다 (예: `zoom`, `order`, `flex`). 단위가 없는 모든 프로퍼티에 대한 목록을 [여기에서](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59) 확인할 수 있습니다. ### suppressContentEditableWarning {#suppresscontenteditablewarning} -Normally, there is a warning when an element with children is also marked as `contentEditable`, because it won't work. This attribute suppresses that warning. Don't use this unless you are building a library like [Draft.js](https://facebook.github.io/draft-js/) that manages `contentEditable` manually. +일반적으로, 자식이 있는 엘리먼트가 `contentEditable`로 표시된다면 제대로 동작하지 않으므로 경고가 표시됩니다. `suppressContentEditableWarning` 어트리뷰트는 경고를 표시하지 않도록 합니다. `contentEditable`을 수동으로 관리하는 [Draft.js](https://facebook.github.io/draft-js/)와 같은 라이브러리를 만들지 않는 한 이 옵션으로 사용하지 마세요. ### suppressHydrationWarning {#suppresshydrationwarning} -If you use server-side React rendering, normally there is a warning when the server and the client render different content. However, in some rare cases, it is very hard or impossible to guarantee an exact match. For example, timestamps are expected to differ on the server and on the client. +서버 사이드 렌더링을 사용하는 경우, 일반적으로 서버와 클라이언트가 다른 내용을 렌더링할 때 경고가 표시됩니다. 그러나 매우 드물게 정확히 일치시키는 게 힘들거나 불가능합니다. 예를 들어 타임 스탬프 같은 경우 서버와 클라이언트에서는 다를 것으로 예상됩니다. -If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. You can read more about hydration in the [`ReactDOM.hydrate()` documentation](/docs/react-dom.html#hydrate). +`suppressHydrationWarning`을 `true`로 설정하면, React는 어트리뷰트와 그 엘리먼트 내용의 불일치에 대해 경고하지 않습니다. 바로 밑 한 단계 깊이를 기준으로만 작동하며 해결책으로 사용하도록 되어 있습니다. 남용하지 마세요. 이벤트 보충에 대한 자세한 내용은 [`ReactDOM.hydrate()` 문서](/docs/react-dom.html#hydrate)를 참조해주세요. ### value {#value} -The `value` attribute is supported by `` and `