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-profiler.md
+19-19
Original file line number
Diff line number
Diff line change
@@ -1,24 +1,24 @@
1
1
---
2
-
id: 프로파일러
3
-
title: 프로파일러 API
2
+
id: profiler
3
+
title: Profiler API
4
4
layout: docs
5
5
category: Reference
6
6
permalink: docs/profiler.html
7
7
---
8
8
9
-
'프로파일러'는 React 어플리케이션의 렌더와 렌더의 "비용"을 계산합니다.
10
-
'프로파일러'의 목적은 [메모이제이션 같은 성능 최적화 방법](/docs/hooks-faq.html#how-to-memoize-calculations)을 활용할 수 있는 어플리케이션의 느린 부분들을 식별해내는 것입니다.
9
+
`Profiler`는 React 애플리케이션의 렌더와 렌더의 "비용"을 계산합니다.
10
+
Profiler의 목적은 [메모이제이션 같은 성능 최적화 방법](/docs/hooks-faq.html#how-to-memoize-calculations)을 활용할 수 있는 애플리케이션의 느린 부분들을 식별해내는 것입니다.
11
11
12
12
>주의
13
13
>
14
-
>프로파일링은 약간의 간접비용이 추가되며**[프로덕션 빌드](/docs/optimizing-performance.html#use-the-production-build)에서는 비활성화되어 있습니다.**.
14
+
>프로파일링은 약간의 오버헤드를 만들기 때문에**[프로덕션 빌드](/docs/optimizing-performance.html#use-the-production-build)에서는 비활성화되어 있습니다.**.
15
15
>
16
16
>프로덕션에서 프로파일링을 활성화하길 원하신다면 React에서 제공하는 특별 프로덕션 빌드를 통해서 활성화하실 수 있습니다.
17
17
>다음 링크에서 이 특별 빌드에 대해서 더 읽어보실 수 있습니다 [fb.me/react-profiling](https://fb.me/react-profiling)
18
18
19
19
## 사용법 {#usage}
20
20
21
-
'프로파일러'는 리액트 트리 내에 어디에나 추가될 수 있으며 트리의 특정 부분의 렌더링 비용을 계산해줍니다.
21
+
`Profiler`는 React 트리 내에 어디에나 추가될 수 있으며 트리의 특정 부분의 렌더링 비용을 계산해줍니다.
22
22
이는 두 가지 props를 요구합니다: `id` (문자열) 와 `onRender` 콜백 (함수)이며 React 트리 내 컴포넌트에 업데이트가 "커밋"되면 호출됩니다.
23
23
24
24
예를 들어, `Navigation` 컴포넌트와 자손 컴포넌트들을 프로파일하기 위해서는
@@ -34,7 +34,7 @@ render(
34
34
);
35
35
```
36
36
37
-
복수의 `프로파일러` 컴포넌트로 어플리케이션의 다른 부분들을 계산할 수 있습니다
37
+
복수의 `Profiler` 컴포넌트로 애플리케이션의 다른 부분들을 계산할 수 있습니다
38
38
```js{3,6}
39
39
render(
40
40
<App>
@@ -48,7 +48,7 @@ render(
48
48
);
49
49
```
50
50
51
-
`프로파일러` 컴포넌트는 하위 트리의 다른 컴포넌트들을 계산하기 위해 중첩해서 사용할 수 있습니다
51
+
`Profiler` 컴포넌트는 하위 트리의 다른 컴포넌트들을 계산하기 위해 중첩해서 사용할 수 있습니다
52
52
```js{2,6,8}
53
53
render(
54
54
<App>
@@ -68,11 +68,11 @@ render(
68
68
69
69
>주의사항
70
70
>
71
-
>`프로파일러`는 가벼운 컴포넌트이지만 필요할 때만 사용해야합니다; 각 프로파일러는 어플리케이션에 조금의 CPU와 메모리 비용을 추가하게 됩니다.
71
+
>`Profiler`는 가벼운 컴포넌트이지만 필요할 때만 사용해야합니다; 각 Profiler는 애플리케이션에 조금의 CPU와 메모리 비용을 추가하게 됩니다.
72
72
73
73
## `onRender` 콜백 {#onrender-callback}
74
74
75
-
`프로파일러`는 `onRender` 함수를 prop으로 요구합니다.
75
+
`Profiler`는 `onRender` 함수를 prop으로 요구합니다.
76
76
React는 프로파일 트리 내의 컴포넌트에 업데이트가 "커밋"될 때마다 이 함수를 호출합니다.
77
77
이 함수는 무엇이 렌더돼엇는지 그리고 얼마나 걸렸는지를 설명하는 입력값을 받게 됩니다
78
78
@@ -93,28 +93,28 @@ function onRenderCallback(
93
93
각 prop에 대해 좀 더 자세히 알아보겠습니다
94
94
95
95
***`id: 문자열`** -
96
-
방금 커밋된 `프로파일러`트리의 `id` prop.
96
+
방금 커밋된 `Profiler`트리의 `id` prop.
97
97
이것은 복수의 프로파일러를 사용하고 있다면 트리의 어느 부분이 커밋되엇는지 식별하는데 사용할 수 있습니다.
98
98
***`phase: "mount" | "update"`** -
99
99
해당 트리가 방금 마운트된 건지 prop, state 혹은 hooks의 변화로 인하여 리렌더가 된 건지 식별합니다.
100
-
***`actualDuration: 숫자`** -
101
-
현재 업데이트에 해당하는 `프로파일러`와 자손 컴포넌트들을 렌더하는데 걸린 시간
100
+
***`actualDuration: number`** -
101
+
현재 업데이트에 해당하는 `Profiler`와 자손 컴포넌트들을 렌더하는데 걸린 시간
102
102
이것은 하위 트리가 얼마나 메모이제이션을 잘 활용하고 있는지를 암시합니다 (e.g. [`React.memo`](/docs/react-api.html#reactmemo), [`useMemo`](/docs/hooks-reference.html#usememo), [`shouldComponentUpdate`](/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)).
103
103
이상적으로 대다수의 자손 컴포넌트들은 특정 prop이 변할 경우에만 리렌더가 필요하기 때문에 이 값은 초기 렌더 이후에 상당 부분 감소해야 합니다.
104
-
***`baseDuration: 숫자`** -
105
-
`프로파일러` 트리 내 개별 컴포넌트들의 가장 최근 `렌더` 시간의 지속기간
104
+
***`baseDuration: number`** -
105
+
`Profiler` 트리 내 개별 컴포넌트들의 가장 최근 `render` 시간의 지속기간
106
106
이 값은 렌더링 비용의 최악 케이스를 계산해줍니다(e.g. 초기 마운트 혹은 메모이제이션이 없는 트리)
107
-
***`startTime: 숫자`** -
107
+
***`startTime: number`** -
108
108
React가 현재 업데이트에 대해 렌더링을 시작한 시간의 타임 스탬프.
109
-
***`commitTime: 숫자`** -
109
+
***`commitTime: number`** -
110
110
React가 현재 업데이트를 커밋한 시간의 타임 스탬프
111
111
This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
112
112
이 값은 모든 프로파일러들이 공유하기 때문에 원한다면 그룹을 지을 수 있습니다.
113
113
***`interactions: Set`** -
114
-
업데이트가 계획되었을 때 추적하고 있던 ["상호작용"](https://fb.me/react-interaction-tracing)의 집합 (e.g. `렌더` 혹은 `setState`가 호출되었을 때).
114
+
업데이트가 계획되었을 때 추적하고 있던 ["상호작용"](https://fb.me/react-interaction-tracing)의 집합 (e.g. `render` 혹은 `setState`가 호출되었을 때).
115
115
116
116
>주의
117
117
>
118
118
>상호작용을 추적하는 API는 아직 시험단계에 있지만, 상호작용은 업데이트의 원인을 식별하는데 사용할 수 있습니다
119
119
>
120
-
>다음의 링크에서 더 자세히 알아볼 수 있습니다 [fb.me/react-interaction-tracing](https://fb.me/react-interaction-tracing)
120
+
>다음의 링크에서 더 자세히 알아볼 수 있습니다 [fb.me/react-interaction-tracing](https://fb.me/react-interaction-tracing)
0 commit comments