You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/reference-dom-elements.md
+5-9Lines changed: 5 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -17,28 +17,24 @@ redirect_from:
17
17
React는 성능 및 브라우저 간 호환성을 위해 브라우저의 독립적인 DOM 시스템을 구현합니다. React에서는 브라우저의 DOM 구현에서 몇 가지 어려운 부분을 정리할 수가 있었습니다.
18
18
19
19
React에서 모든 프로퍼티 및 어트리뷰트(이벤트 핸들러 포함)은 캐멀 케이스를 사용합니다.
20
-
예를 들어 HTML 속성인`tabindex`는 React의 `tabIndex`으로 표현합니다. 예 외는 `aria-*` 및 `data-*`속성입니다. 이는 소문자로 표현합니다. 예를 들어, `aria-label`은 `aria-label`로 동일하게 유지됩니다.
20
+
예를 들어 HTML 어크리뷰트인`tabindex`는 React의 `tabIndex`으로 표현합니다. 예외는 `aria-*` 및 `data-*`어트리뷰트입니다. 이는 소문자로 표현합니다. 예를 들어, `aria-label`은 `aria-label`로 동일하게 유지됩니다.
21
21
22
22
## 어트리뷰트의 차이 {#differences-in-attributes}
23
23
24
24
React와 HTML 사이에는 다르게 작동하는 여러가지의 어트리뷰트들이 있습니다.
25
25
26
26
### checked {#checked}
27
27
28
-
`checked`속성은 `checkbox` 또는 `radio` 타입의 `<input>` 컴포넌트에 의해 지원됩니다.
29
-
이 속성을 사용하여 구성 요소의 선택 여부를 설정할 수 있습니다. 이는 제어 컴포넌트를 빌드하는 데 유용합니다. `defaultChecked`는 구성 요소가 처음 마운트 될 때 체크 여부를 확인하며 제어되지 않는 속성입니다.
28
+
`checked` 어트리뷰트는 `checkbox` 또는 `radio` 타입의 `<input>` 컴포넌트에 의해 지원됩니다. 이 어트리뷰트를 사용해서 컴포넌트의 선택 여부를 설정할 수 있습니다. 이는 제어 컴포넌트를 만들 때 유용합니다. `defaultChecked`는 컴포넌트가 사용되는 동등한 의미를 가지는 어트리뷰트이며 컴포넌트가 처음 마운트될 때 선택 여부를 설정합니다.
30
29
31
30
### className {#classname}
32
31
33
-
CSS class를 사용하려면 `className` 속성을 사용하십시오.
34
-
이는 `<div>`, `<a>` 등과 같은 모든 정규 DOM 및 SVG 요소에 적용됩니다.
35
-
36
-
웹 구성 요소로 React with Web Components (which is uncommon)을 사용하는 경우 `class` 속성을 사용하십시오.
32
+
CSS class를 사용하려면 `className` 어트리뷰트를 사용하십시오.
33
+
이는 `<div>`, `<a>` 등과 같은 모든 일반적인 DOM 및 SVG 엘리먼트에 적용됩니다. 웹 컴포넌트 React with Web Components (which is uncommon)을 사용하는 경우 `class` 속성을 사용하세요.
`dangerouslySetInnerHTML`은 브라우저 DOM에서 `innerHTML`을 사용하기 위한 React의 대체물입니다.
41
-
일반적으로 코드에서 HTML을 설정하는 것은 [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 `dangerouslySetInnerHTML`을 작성하고 `__html` 키로 객체를 전달해야 합니다. 아래는 예시입니다:
37
+
`dangerouslySetInnerHTML`은 브라우저 DOM에서 `innerHTML`을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 [사이트 간 스크립팅](https://ko.wikipedia.org/wiki/사이트_간_스크립팅) 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 `dangerouslySetInnerHTML`을 작성하고 `__html` 키로 객체를 전달해야 합니다. 아래는 예시입니다.
0 commit comments