Skip to content

Commit 17f53e4

Browse files
authored
fix(DomElements) code review
1 parent 49a25c8 commit 17f53e4

File tree

1 file changed

+5
-9
lines changed

1 file changed

+5
-9
lines changed

content/docs/reference-dom-elements.md

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,28 +17,24 @@ redirect_from:
1717
React는 성능 및 브라우저 간 호환성을 위해 브라우저의 독립적인 DOM 시스템을 구현합니다. React에서는 브라우저의 DOM 구현에서 몇 가지 어려운 부분을 정리할 수가 있었습니다.
1818

1919
React에서 모든 프로퍼티 및 어트리뷰트(이벤트 핸들러 포함)은 캐멀 케이스를 사용합니다.
20-
예를 들어 HTML 속성인 `tabindex`는 React의 `tabIndex`으로 표현합니다. 예 외는 `aria-*``data-*` 속성입니다. 이는 소문자로 표현합니다. 예를 들어, `aria-label``aria-label`로 동일하게 유지됩니다.
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>` 컴포넌트에 의해 지원됩니다.
29-
이 속성을 사용하여 구성 요소의 선택 여부를 설정할 수 있습니다. 이는 제어 컴포넌트를 빌드하는 데 유용합니다. `defaultChecked`는 구성 요소가 처음 마운트 될 때 체크 여부를 확인하며 제어되지 않는 속성입니다.
28+
`checked` 어트리뷰트는 `checkbox` 또는 `radio` 타입의 `<input>` 컴포넌트에 의해 지원됩니다. 이 어트리뷰트를 사용해서 컴포넌트의 선택 여부를 설정할 수 있습니다. 이는 제어 컴포넌트를 만들 때 유용합니다. `defaultChecked`는 컴포넌트가 사용되는 동등한 의미를 가지는 어트리뷰트이며 컴포넌트가 처음 마운트될 때 선택 여부를 설정합니다.
3029

3130
### className {#classname}
3231

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` 속성을 사용하세요.
3734

3835
### dangerouslySetInnerHTML {#dangerouslysetinnerhtml}
3936

40-
`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` 키로 객체를 전달해야 합니다. 아래는 예시입니다.
4238

4339
```js
4440
function createMarkup() {

0 commit comments

Comments
 (0)