Skip to content

Commit 0c8aa10

Browse files
committed
Update DOM Element translation
1 parent 8b47e16 commit 0c8aa10

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

content/docs/reference-dom-elements.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,22 @@ redirect_from:
1616

1717
React는 성능 및 브라우저 간 호환성을 위해 브라우저의 독립적인 DOM 시스템을 구현합니다. React에서는 브라우저의 DOM 구현에서 몇 가지 어려운 부분을 정리할 수가 있었습니다.
1818

19-
React에서 모든 프로퍼티 및 어트리뷰트(이벤트 핸들러 포함)은 캐멀 케이스를 사용합니다.
20-
예를 들어 HTML 어크리뷰트인 `tabindex`는 React의 `tabIndex`으로 표현합니다. 예외는 `aria-*``data-*` 어트리뷰트입니다. 이는 소문자로 표현합니다. 예를 들어, `aria-label``aria-label`로 동일하게 유지됩니다.
19+
React에서 모든 프로퍼티 및 어트리뷰트(이벤트 핸들러 포함)은 캐멀 케이스를 사용합니다.
20+
예를 들어 HTML 어트리뷰트인 `tabindex`는 React의 `tabIndex`으로 표현합니다. 예외는 `aria-*``data-*` 어트리뷰트입니다. 이는 소문자로 표현합니다. 예를 들어, `aria-label``aria-label`로 동일하게 유지됩니다.
2121

2222
## 어트리뷰트의 차이 {#differences-in-attributes}
2323

2424
React와 HTML 사이에는 다르게 작동하는 여러가지의 어트리뷰트들이 있습니다.
2525

2626
### checked {#checked}
2727

28-
`checked` 어트리뷰트는 `checkbox` 또는 `radio` 타입의 `<input>` 컴포넌트에 의해 지원됩니다. 이 어트리뷰트를 사용해서 컴포넌트의 선택 여부를 설정할 수 있습니다. 이는 제어 컴포넌트를 만들 때 유용합니다. `defaultChecked`는 컴포넌트가 사용되는 동등한 의미를 가지는 어트리뷰트이며 컴포넌트가 처음 마운트될 때 선택 여부를 설정합니다.
28+
`checked` 어트리뷰트는 `checkbox` 또는 `radio` 타입의 `<input>` 컴포넌트에 의해 지원됩니다. 이 어트리뷰트를 사용해서 컴포넌트의 선택 여부를 설정할 수 있습니다. 이는 제어 컴포넌트를 만들 때 유용합니다. `defaultChecked`비제어 컴포넌트가 사용되는 동등한 의미를 가지는 어트리뷰트이며 컴포넌트가 처음 마운트될 때 선택 여부를 설정합니다.
2929

3030
### className {#classname}
3131

32-
CSS class를 사용하려면 `className` 어트리뷰트를 사용하십시오.
33-
이는 `<div>`, `<a>` 등과 같은 모든 일반적인 DOM 및 SVG 엘리먼트에 적용됩니다. 웹 컴포넌트 React with Web Components (which is uncommon)을 사용하는 경우 `class` 속성을 사용하세요.
32+
CSS class를 사용하려면 `className` 어트리뷰트를 사용하세요. 이는 `<div>`, `<a>` 등과 같은 모든 일반적인 DOM 및 SVG 엘리먼트에 적용됩니다.
33+
34+
웹 컴포넌트 React with Web Components (which is uncommon)을 사용하는 경우 `class` 어트리뷰트를 사용하세요.
3435

3536
### dangerouslySetInnerHTML {#dangerouslysetinnerhtml}
3637

@@ -48,11 +49,10 @@ function MyComponent() {
4849

4950
### htmlFor {#htmlfor}
5051

51-
`for`는 JavaScript에서 예약어이므로 React 엘리컨트는 `htmlFor`를 대신 사용합니다.
52+
`for`는 JavaScript에서 예약어이므로 React 엘리먼트는 `htmlFor`를 대신 사용합니다.
5253

5354
### onChange {#onchange}
5455

55-
필드가 변경될때 실행되는 이벤트입니다. 일반적으로 알고있는 onChanage이벤트를 사용하지않습니다.
5656
`onChange` 이벤트는 예상한대로 폼 필드가 변경될 때 이벤트가 발생합니다. 의도적으로 기존 브라우저의 동작을 사용하지 않는데 `onChange`는 이러한 동작에 대해 잘못된 명칭이며 React는 실시간으로 유저 입력을 처리하는 이벤트에 의존하기 때문입니다.
5757

5858

@@ -64,7 +64,7 @@ function MyComponent() {
6464

6565
>주의
6666
>
67-
>문서의 일부 예시는 편의상 style을 사용하지만, **style 어트리뷰트를 스타일링의 주요 수단으로 사용하는 것은 일반적으로 권장되지 않습니다**. 대부분의 경우 [`className`](#classname) 외부 CSS stylesheet에 정의된 class를 참조하는데 사용해야 합니다. style은 보통 React 애플리케이션에서 렌더링 시점에 동적으로 계산된 스타일을 추가하기 위해 사용됩니다. [FAQ: Styling and CSS를 참조해주세요.](/docs/faq-styling.html).
67+
>문서의 일부 예시는 편의상 style을 사용하지만, **style 어트리뷰트를 스타일링의 주요 수단으로 사용하는 것은 일반적으로 권장되지 않습니다**. 대부분의 경우 [`className`](#classname) 외부 CSS stylesheet에 정의된 class를 참조하는데 사용해야 합니다. style은 보통 React 애플리케이션에서 렌더링 시점에 동적으로 계산된 스타일을 추가하기 위해 사용됩니다. [FAQ: Styling and CSS](/docs/faq-styling.html)를 참조해주세요.
6868
6969
`style` 어트리뷰트는 CSS 문자열 대신 캐멀 케이스 프로퍼티를 가진 JavaScript 객체로 받아들입니다. 이는 DOM style JavaScript 프로퍼티와 일관되며 더 효율적이며 XSS 보안 허점을 방지합니다. 아래는 예시입니다.
7070

@@ -92,7 +92,7 @@ function ComponentWithTransition() {
9292
}
9393
```
9494

95-
스타일 키는 JS에서 DOM 노드의 프로퍼티에 접근하는 것과 일관되게 유지하기 위해 캐멜 케이스를 사용합니다. (예 :`node.style.backgroundImage`). 벤더 프리픽스 [`ms` 제외](https://www.andismith.com/blogs/2012/02/modernizr-prefixed/)는 대문자로 시작해야 합니다. 이것이 바로 `WebkitTransition`이 대문자 "W"를 갖는 이유입니다.
95+
스타일 키는 JS에서 DOM 노드의 프로퍼티에 접근하는 것과 일관되게 유지하기 위해 캐멜 케이스를 사용합니다. (예: `node.style.backgroundImage`). 벤더 프리픽스 [`ms` 제외](https://www.andismith.com/blogs/2012/02/modernizr-prefixed/)는 대문자로 시작해야 합니다. 이것이 바로 `WebkitTransition`이 대문자 "W"를 갖는 이유입니다.
9696

9797
React는 특정 숫자 인라인 스타일 프로퍼티는 "px" 접미사를 자동으로 추가합니다. "px"이 아닌 다른 단위를 사용하길 원한다면, 원하는 단위와 함께 값을 문자열로 지정해주세요. 아래는 예시입니다.
9898

@@ -108,25 +108,25 @@ React는 특정 숫자 인라인 스타일 프로퍼티는 "px" 접미사를 자
108108
</div>
109109
```
110110

111-
모든 스타일 프로퍼티가 픽셀 문자열로 변환되는 것은 아닙니다. 어떤 속성들은 단위가 없습니다 (예 :`zoom`,`order`,`flex`). 단위가 없는 모든 프로퍼티에 대한 목록을 [여기에서](ttps://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59) 확인할 수 있습니다.
111+
모든 스타일 프로퍼티가 픽셀 문자열로 변환되는 것은 아닙니다. 어떤 속성들은 단위가 없습니다 (예: `zoom`, `order`, `flex`). 단위가 없는 모든 프로퍼티에 대한 목록을 [여기에서](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59) 확인할 수 있습니다.
112112

113113
### suppressContentEditableWarning {#suppresscontenteditablewarning}
114114

115-
일반적으로, 자식이 있는 엘리먼트가 contentEditable로 표시된다면 제대로 동작하지 않으므로 경고가 표시됩니다. suppressContentEditableWarning 어트리뷰트는 경고를 표시하지 않도록 합니다. `contentEditable`을 수동으로 관리하는 [Draft.js](https://facebook.github.io/draft-js/)와 같은 라이브러리를 만들지 않는 한 이 옵션으로 사용하지 마십시오.
115+
일반적으로, 자식이 있는 엘리먼트가 `contentEditable` 표시된다면 제대로 동작하지 않으므로 경고가 표시됩니다. `suppressContentEditableWarning` 어트리뷰트는 경고를 표시하지 않도록 합니다. `contentEditable`을 수동으로 관리하는 [Draft.js](https://facebook.github.io/draft-js/)와 같은 라이브러리를 만들지 않는 한 이 옵션으로 사용하지 마세요.
116116

117117
### suppressHydrationWarning {#suppresshydrationwarning}
118118

119119
서버 사이드 렌더링을 사용하는 경우, 일반적으로 서버와 클라이언트가 다른 내용을 렌더링할 때 경고가 표시됩니다. 그러나 매우 드물게 정확히 일치시키는 게 힘들거나 불가능합니다. 예를 들어 타임 스탬프 같은 경우 서버와 클라이언트에서는 다를 것으로 예상됩니다.
120120

121-
`suppressHydrationWarning``true`로 설정하면, React는 어트리뷰트와 그 엘리먼트 내용의 불일치에 대해 경고하지 않습니다. 바로 밑 한 단계 깊이를 기준으로만 작동하며 해결책 사용하도록 되어 있습니다. 남용하지 마십시오. 이벤트 보충에 대한 자세한 내용은 [`ReactDOM.hydrate()` 문서](/docs/react-dom.html#hydrate)를 참조해주세요.
121+
`suppressHydrationWarning``true`로 설정하면, React는 어트리뷰트와 그 엘리먼트 내용의 불일치에 대해 경고하지 않습니다. 바로 밑 한 단계 깊이를 기준으로만 작동하며 해결책으로 사용하도록 되어 있습니다. 남용하지 마세요. 이벤트 보충에 대한 자세한 내용은 [`ReactDOM.hydrate()` 문서](/docs/react-dom.html#hydrate)를 참조해주세요.
122122

123123
### value {#value}
124124

125125
`value` 어트리뷰트는 `<input>``<textarea>` 컴포넌트에 의해 지원됩니다. 이를 이용해 컴포넌트의 값을 설정할 수 있습니다. 이는 제어 컴포넌트를 만드는 데 유용합니다. `defaultValue` 비제어 컴포넌트에서 사용되는 동등한 의미를 가지는 어트리뷰트이며, 처음 마운트될 때 컴포넌트의 값을 설정합니다.
126126

127127
## 지원되는 모든 HTML 어트리뷰트 {#all-supported-html-attributes}
128128

129-
React 16부터는 모든 표준 [또는 사용자 정의](/blog/2017/09/08/dom-attributes-in-react-16.html) DOM 어트리뷰가 완벽하게 지원됩니다.
129+
React 16부터는 모든 표준 [또는 사용자 정의](/blog/2017/09/08/dom-attributes-in-react-16.html) DOM 어트리뷰트가 완벽하게 지원됩니다.
130130

131131
React는 항상 JavaScript 중심 API를 DOM에 제공했습니다. React 컴포넌트는 사용자 지정 및 DOM 관련 props 둘 다 받아들이기 때문에, React는 DOM API처럼 camelCase를 사용합니다.
132132

@@ -136,7 +136,7 @@ React는 항상 JavaScript 중심 API를 DOM에 제공했습니다. React 컴포
136136
<input readOnly={true} /> // Just like node.readOnly DOM API
137137
```
138138

139-
이러한 props는 위에 설명 된 특별한 경우를 제외하고는 해당 HTML 속성과 유사하게 작동합니다.
139+
이러한 props는 위에 설명 된 특별한 경우를 제외하고는 해당 HTML 어트리뷰트와 유사하게 작동합니다.
140140

141141
React가 지원하는 DOM 어트리뷰트 중 일부는 다음과 같습니다.
142142

0 commit comments

Comments
 (0)