Shim Won
10 years ago
committed by
Jay Jaeho Lee
Jay Jaeho Lee
18 changed files with 72 additions and 69 deletions
@ -1,17 +1,17 @@ |
|||
--- |
|||
id: dom-differences-ko-KR |
|||
title: DOM 차이점 |
|||
permalink: dom-differences.ko-KR.html |
|||
prev: events.ko-KR.html |
|||
next: special-non-dom-attributes.ko-KR.html |
|||
permalink: dom-differences-ko-KR.html |
|||
prev: events-ko-KR.html |
|||
next: special-non-dom-attributes-ko-KR.html |
|||
--- |
|||
|
|||
React는 성능과 크로스 브라우저 호환성을 이유로 브라우저에 독립적인 이벤트와 DOM 시스템으로 구현되었습니다. 브라우저 DOM 구현의 거친 부분을 정리할 기회를 가졌습니다. |
|||
|
|||
* 모든 DOM 프로퍼티와 어트리뷰트는 (이벤트 핸들러를 포함해) 표준 JavaScript 스타일과 일치하도록 카멜케이스를 사용해야 합니다. **하지만**, `data-*` 와 `aria-*` 어트리뷰트는 [사양을 준수해](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-*) 소문자만 사용해야 합니다. |
|||
* `style` 어트리뷰트는 CSS 문자열 대신에 카멜케이스로 된 프로퍼티를 가지는 JavaScript 객체를 받습니다. 이는 DOM `style` JavaScript 프로퍼티와 일치하면서도 좀 더 효율적이며, XSS 보안 취약점을 예방할 수 있습니다. |
|||
* 모든 이벤트 객체는 W3C 사양을 준수하고, 모든 이벤트(submit을 포함해)는 W3C 사양에 따라 일으킵(bubble)니다. 좀 더 자세한 정보는 [이벤트 시스템](/react/docs/events.html)을 보세요. |
|||
* `onChange` 이벤트는 기대대로 동작합니다. 이 이벤트는 일관성없이 blur시점에서 발생하지 않고 폼 필드가 변경될 때만 발생합니다.[^1] 우리는 의도적으로 기존 브라우저 동작을 차단했습니다. `onChange`는 이름과 실제 동작이 다르고, React는 실시간으로 사용자 입력에 반응할 때 이 이벤트에 의존하기 때문입니다. 더 자세한 정보는 [폼](/react/docs/forms.html)을 보세요. |
|||
* `value`와 `checked` 폼 input 어트리뷰트, `textarea`. [자세히 보기](/react/docs/forms.html). |
|||
* 모든 이벤트 객체는 W3C 사양을 준수하고, 모든 이벤트(submit을 포함해)는 W3C 사양에 따라 일으킵(bubble)니다. 좀 더 자세한 정보는 [이벤트 시스템](/react/docs/events-ko-KR.html)을 보세요. |
|||
* `onChange` 이벤트는 기대대로 동작합니다. 이 이벤트는 일관성없이 blur시점에서 발생하지 않고 폼 필드가 변경될 때만 발생합니다.[^1] 우리는 의도적으로 기존 브라우저 동작을 차단했습니다. `onChange`는 이름과 실제 동작이 다르고, React는 실시간으로 사용자 입력에 반응할 때 이 이벤트에 의존하기 때문입니다. 더 자세한 정보는 [폼](/react/docs/forms-ko-KR.html)을 보세요. |
|||
* `value`와 `checked` 폼 input 어트리뷰트, `textarea`. [자세히 보기](/react/docs/forms-ko-KR.html). |
|||
|
|||
[^1]: **역주**: 일관성 없다는 표현에 대해 부연 설명하자면, 네이티브의 onChange는 변경뿐만 아니라 blur에서도 반응합니다. |
|||
|
|||
@ -1,13 +1,13 @@ |
|||
--- |
|||
id: special-non-dom-attributes-ko-KR |
|||
title: DOM이 아닌 특별한 어트리뷰트 |
|||
permalink: special-non-dom-attributes.ko-KR.html |
|||
prev: dom-differences.ko-KR.html |
|||
next: reconciliation.ko-KR.html |
|||
permalink: special-non-dom-attributes-ko-KR.html |
|||
prev: dom-differences-ko-KR.html |
|||
next: reconciliation-ko-KR.html |
|||
--- |
|||
|
|||
[DOM 차이점](/react/docs/dom-differences.html)처럼, React는 DOM에는 존재하지 않는 몇몇 어트리뷰트도 제공합니다. |
|||
[DOM 차이점](/react/docs/dom-differences-ko-KR.html)처럼, React는 DOM에는 존재하지 않는 몇몇 어트리뷰트도 제공합니다. |
|||
|
|||
- `key`: 선택적인 고유 식별자. 컴포넌트가 `render` 과정에서 섞일 때, diff 알고리즘에 의해 파괴되고, 다시 생성될 수 있습니다. 컴포넌트에 영속적인(persists) 키를 할당하면 컴포넌트가 확실히 유지되게 할 수 있습니다. 더 자세한 것은 [여기](/react/docs/multiple-components.html#dynamic-children)에서 보세요. |
|||
- `ref`: [여기](/react/docs/more-about-refs.html)를 보세요. |
|||
- `key`: 선택적인 고유 식별자. 컴포넌트가 `render` 과정에서 섞일 때, diff 알고리즘에 의해 파괴되고, 다시 생성될 수 있습니다. 컴포넌트에 영속적인(persists) 키를 할당하면 컴포넌트가 확실히 유지되게 할 수 있습니다. 더 자세한 것은 [여기](/react/docs/multiple-components-ko-KR.html#dynamic-children)에서 보세요. |
|||
- `ref`: [여기](/react/docs/more-about-refs-ko-KR.html)를 보세요. |
|||
- `dangerouslySetInnerHTML`: 생(raw) HTML을 넣을 수 있게 합니다. 주로 DOM 문자열 관리 라이브러리와의 협력하기 위해 사용합니다. 더 자세한 것은 [여기](/react/tips/dangerously-set-inner-html.html)를 보세요. |
|||
|
|||
Loading…
Reference in new issue