@samitouri / QOS-React-2 / commits / 74adeb3611

Translate 10.8 to Korean

- Up to ab512af

Shim Won committed Mar 1, 2015 at 06:37 UTC 74adeb3611d09147236cd6ba03e6525996c7f648
1 file changed +72
docs/docs/10.8-perf.ko-KR.md new
+72
@@ -0,0 +1,72 @@
1 +---
2 +id: perf-ko-KR
3 +title: 성능 도구
4 +permalink: perf-ko-KR.html
5 +prev: pure-render-mixin-ko-KR.html
6 +next: advanced-performance-ko-KR.html
7 +---
8 +
9 +React는 보통 처음에는 꽤 빠릅니다. 하지만 모든 성능을 짜내야 하는 상황일 때를 위해, React는 [shouldComponentUpdate](/react/docs/component-specs.html#updating-shouldcomponentupdate) 훅을 제공해 React의 diff 알고리즘을 위한 최적화 힌트를 추가할 수 있습니다.
10 +
11 +덧붙여 앱의 전반적인 성능의 개요도 제공합니다. ReactPerf는 프로파일링 도구로 정확히 어디에 훅이 필요한지 알려줍니다.
12 +
13 +> 주의:
14 +>
15 +> React의 개발 빌드는 제공되는 추가 기능으로 인해 프로덕션 빌드보다 느립니다. 추가 기능에는 React의 친절한 콘솔 경고같은 것이 있습니다.(이는 프로덕션 빌드에서는 제거 됩니다) 따라서, 프로파일러는 앱의 _상대적으로_ 비싼 부분만 표시하도록 합니다.
16 +
17 +## 일반 API
18 +
19 +여기에서 설명하는 `Perf` 객체는 `react-with-addons.js`를 사용해 개발 모드에서 빌드될 때 `React.addons.Perf`로 노출됩니다.
20 +
21 +### `Perf.start()`와 `Perf.stop()`
22 +측정을 시작/정지합니다. 그 사이의 React 연산은 밑에 있는 분석을 하기위해 기록됩니다. 미미한 양의 연산은 무시됩니다.
23 +
24 +### `Perf.printInclusive(measurements)`
25 +전 수행 시간을 출력합니다. 인자가 넘겨지지 않으면, 기본값은 지난 기록부터의 모든 측정이 됩니다. 이 출력은 밑에 있는 것처럼 콘솔에서 깔끔한 테이블로 그려집니다.
26 +
27 +![](/react/img/docs/perf-inclusive.png)
28 +
29 +### `Perf.printExclusive(measurements)`
30 +컴포넌트를 마운트하는 시간을 포함하지 않은 "exclusive" 시간입니다. 여기에는 props 연산, `getInitialState`, `componentWillMount` 호출, `componentDidMount`등이 포함됩니다.
31 +
32 +![](/react/img/docs/perf-exclusive.png)
33 +
34 +### `Perf.printWasted(measurements)`
35 +
36 +**프로파일러에서 가장 유용한 부분입니다**.
37 +
38 +렌더가 같아서, DOM을 변경(touch)하지 않는 경우같은 실제로는 아무것도 렌더하지 않는 컴포넌트가 사용하는 "낭비되는" 시간을 출력합니다.
39 +
40 +![](/react/img/docs/perf-wasted.png)
41 +
42 +### `Perf.printDOM(measurements)`
43 +"set innerHTML"이나 "remove"같은 기저의 DOM 조작을 출력합니다.
44 +
45 +![](/react/img/docs/perf-dom.png)
46 +
47 +## 고급 API
48 +
49 +위의 출력 메소드에 `Perf.getLastMeasurements()`를 사용해 결과를 이쁘게 출력합니다.
50 +
51 +### `Perf.getLastMeasurements()`
52 +마지막 start-stop 세션에서 측정들의 배열을 가져옵니다. 이 배열은 이런 객체들을 가지고 있습니다.
53 +
54 +```js
55 +{
56 + // 용어 "inclusive"와 "exclusive"는 위에서 설명했음
57 + "exclusive": {},
58 + // '.0.0'는 노드의 React ID
59 + "inclusive": {".0.0": 0.0670000008540228, ".0": 0.3259999939473346},
60 + "render": {".0": 0.036999990697950125, ".0.0": 0.010000003385357559},
61 + // 인스턴스의 수
62 + "counts": {".0": 1, ".0.0": 1},
63 + // DOM 변경(touch)
64 + "writes": {},
65 + // 추가 디버깅 정보
66 + "displayNames": {
67 + ".0": {"current": "App", "owner": "<root>"},
68 + ".0.0": {"current": "Box", "owner": "App"}
69 + },
70 + "totalTime": 0.48499999684281647
71 +}
72 +```