Translate 02.3 to Korean
- Up to 6f44f60
Shim Won committed
Feb 16, 2015 at 18:02 UTC
fe8cd0c44272497f6f827ed453bd35b80155347a
1 file changed
+68
docs/docs/02.3-jsx-gotchas.ko-KR.md
new
+68
@@ -0,0 +1,68 @@
1
+---
2
+id: jsx-gotchas-ko-KR
3
+title: JSX Gotchas
4
+permalink: jsx-gotchas-ko-KR.html
5
+prev: jsx-spread-ko-KR.html
6
+next: interactivity-and-dynamic-uis-ko-KR.html
7
+---
8
+
9
+JSX는 HTML처럼 보이지만 하다 보면 부딪히게 될 몇 가지 중요한 차이점이 있습니다.
10
+
11
+> 주의:
12
+>
13
+> 인라인 `style` 어트리뷰트 같은 DOM 차이점은 [여기](/react/docs/dom-differences.html)를 보세요.
14
+
15
+## HTML 엔티티
16
+
17
+JSX의 리터럴 텍스트에 HTML 엔티티를 넣을 수 있습니다.
18
+
19
+```javascript
20
+<div>First · Second</div>
21
+```
22
+
23
+동적 콘텐츠 안에 HTML 엔티티를 표시하려 할 때, React에서는 XSS 공격을 광범위하게 막기 위해 기본적으로 모든 표시하는 문자열을 이스케이프 하기 때문에 더블 이스케이프 문제에 부딪히게 됩니다.
24
+
25
+```javascript
26
+// 나쁨: "First · Second"를 표시
27
+<div>{'First · Second'}</div>
28
+```
29
+
30
+이 이슈를 피해 갈 방법은 여럿 있지만, 가장 쉬운 방법은 유니코드 문자를 JavaScript에 직접 쓰는 것입니다. 브라우저가 올바르게 표시하도록 파일이 UTF-8으로 저장되어 있고 올바른 UTF-8 지시자를 사용하고 있는지 확인해야 합니다.
31
+
32
+```javascript
33
+<div>{'First · Second'}</div>
34
+```
35
+
36
+더 안전한 대안으로 [엔티티에 대응하는 유니코드 숫자](http://www.fileformat.info/info/unicode/char/b7/index.htm)를 찾아 JavaScript 스트링 안에서 사용하는 방법도 있습니다.
37
+
38
+```javascript
39
+<div>{'First \u00b7 Second'}</div>
40
+<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
41
+```
42
+
43
+문자열과 JSX 엘리먼트를 혼합한 배열을 사용할 수도 있습니다.
44
+
45
+```javascript
46
+<div>{['First ', <span>·</span>, ' Second']}</div>
47
+```
48
+
49
+최후의 수단으로, 항상 [생 HTML을 삽입](/react/docs/dom-differences.html)할 수는 있습니다.
50
+
51
+```javascript
52
+<div dangerouslySetInnerHTML={{'{{'}}__html: 'First · Second'}} />
53
+```
54
+
55
+
56
+## 커스텀 HTML 어트리뷰트
57
+
58
+프로퍼티를 HTML 사양에는 없는 네이티브 HTML 엘리먼트에 넘기면, React는 그 프로퍼티를 렌더하지 않습니다. 커스텀 어트리뷰트를 사용하고 싶다면, 접두사로 `data-`를 붙이셔야 합니다.
59
+
60
+```javascript
61
+<div data-custom-attribute="foo" />
62
+```
63
+
64
+`aria-`로 시작하는 [Web 접근성](http://www.w3.org/WAI/intro/aria) 어트리뷰트는 제대로 렌더될 것입니다.
65
+
66
+```javascript
67
+<div aria-hidden={true} />
68
+```