Skip to content

Commit e0c7e22

Browse files
authored
Apply suggestions from code review
1 parent 633b441 commit e0c7e22

File tree

1 file changed

+19
-19
lines changed

1 file changed

+19
-19
lines changed

Diff for: content/docs/reference-profiler.md

+19-19
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
---
2-
id: 프로파일러
3-
title: 프로파일러 API
2+
id: profiler
3+
title: Profiler API
44
layout: docs
55
category: Reference
66
permalink: docs/profiler.html
77
---
88

9-
'프로파일러'는 React 어플리케이션의 렌더와 렌더의 "비용"을 계산합니다.
10-
'프로파일러'의 목적은 [메모이제이션 같은 성능 최적화 방법](/docs/hooks-faq.html#how-to-memoize-calculations)을 활용할 수 있는 어플리케이션의 느린 부분들을 식별해내는 것입니다.
9+
`Profiler`는 React 애플리케이션의 렌더와 렌더의 "비용"을 계산합니다.
10+
Profiler의 목적은 [메모이제이션 같은 성능 최적화 방법](/docs/hooks-faq.html#how-to-memoize-calculations)을 활용할 수 있는 애플리케이션의 느린 부분들을 식별해내는 것입니다.
1111

1212
>주의
1313
>
14-
>프로파일링은 약간의 간접비용이 추가되며 **[프로덕션 빌드](/docs/optimizing-performance.html#use-the-production-build)에서는 비활성화되어 있습니다.**.
14+
> 프로파일링은 약간의 오버헤드를 만들기 때문에 **[프로덕션 빌드](/docs/optimizing-performance.html#use-the-production-build)에서는 비활성화되어 있습니다.**.
1515
>
1616
>프로덕션에서 프로파일링을 활성화하길 원하신다면 React에서 제공하는 특별 프로덕션 빌드를 통해서 활성화하실 수 있습니다.
1717
>다음 링크에서 이 특별 빌드에 대해서 더 읽어보실 수 있습니다 [fb.me/react-profiling](https://fb.me/react-profiling)
1818
1919
## 사용법 {#usage}
2020

21-
'프로파일러'는 리액트 트리 내에 어디에나 추가될 수 있으며 트리의 특정 부분의 렌더링 비용을 계산해줍니다.
21+
`Profiler`는 React 트리 내에 어디에나 추가될 수 있으며 트리의 특정 부분의 렌더링 비용을 계산해줍니다.
2222
이는 두 가지 props를 요구합니다: `id` (문자열) 와 `onRender` 콜백 (함수)이며 React 트리 내 컴포넌트에 업데이트가 "커밋"되면 호출됩니다.
2323

2424
예를 들어, `Navigation` 컴포넌트와 자손 컴포넌트들을 프로파일하기 위해서는
@@ -34,7 +34,7 @@ render(
3434
);
3535
```
3636

37-
복수의 `프로파일러` 컴포넌트로 어플리케이션의 다른 부분들을 계산할 수 있습니다
37+
복수의 `Profiler` 컴포넌트로 애플리케이션의 다른 부분들을 계산할 수 있습니다
3838
```js{3,6}
3939
render(
4040
<App>
@@ -48,7 +48,7 @@ render(
4848
);
4949
```
5050

51-
`프로파일러` 컴포넌트는 하위 트리의 다른 컴포넌트들을 계산하기 위해 중첩해서 사용할 수 있습니다
51+
`Profiler` 컴포넌트는 하위 트리의 다른 컴포넌트들을 계산하기 위해 중첩해서 사용할 수 있습니다
5252
```js{2,6,8}
5353
render(
5454
<App>
@@ -68,11 +68,11 @@ render(
6868

6969
>주의사항
7070
>
71-
>`프로파일러`는 가벼운 컴포넌트이지만 필요할 때만 사용해야합니다; 각 프로파일러는 어플리케이션에 조금의 CPU와 메모리 비용을 추가하게 됩니다.
71+
>`Profiler`는 가벼운 컴포넌트이지만 필요할 때만 사용해야합니다; 각 Profiler는 애플리케이션에 조금의 CPU와 메모리 비용을 추가하게 됩니다.
7272
7373
## `onRender` 콜백 {#onrender-callback}
7474

75-
`프로파일러``onRender` 함수를 prop으로 요구합니다.
75+
`Profiler``onRender` 함수를 prop으로 요구합니다.
7676
React는 프로파일 트리 내의 컴포넌트에 업데이트가 "커밋"될 때마다 이 함수를 호출합니다.
7777
이 함수는 무엇이 렌더돼엇는지 그리고 얼마나 걸렸는지를 설명하는 입력값을 받게 됩니다
7878

@@ -93,28 +93,28 @@ function onRenderCallback(
9393
각 prop에 대해 좀 더 자세히 알아보겠습니다
9494

9595
* **`id: 문자열`** -
96-
방금 커밋된 `프로파일러`트리의 `id` prop.
96+
방금 커밋된 `Profiler` 트리의 `id` prop.
9797
이것은 복수의 프로파일러를 사용하고 있다면 트리의 어느 부분이 커밋되엇는지 식별하는데 사용할 수 있습니다.
9898
* **`phase: "mount" | "update"`** -
9999
해당 트리가 방금 마운트된 건지 prop, state 혹은 hooks의 변화로 인하여 리렌더가 된 건지 식별합니다.
100-
* **`actualDuration: 숫자`** -
101-
현재 업데이트에 해당하는 `프로파일러`와 자손 컴포넌트들을 렌더하는데 걸린 시간
100+
* **`actualDuration: number`** -
101+
현재 업데이트에 해당하는 `Profiler`와 자손 컴포넌트들을 렌더하는데 걸린 시간
102102
이것은 하위 트리가 얼마나 메모이제이션을 잘 활용하고 있는지를 암시합니다 (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)).
103103
이상적으로 대다수의 자손 컴포넌트들은 특정 prop이 변할 경우에만 리렌더가 필요하기 때문에 이 값은 초기 렌더 이후에 상당 부분 감소해야 합니다.
104-
* **`baseDuration: 숫자`** -
105-
`프로파일러` 트리 내 개별 컴포넌트들의 가장 최근 `렌더` 시간의 지속기간
104+
* **`baseDuration: number`** -
105+
`Profiler` 트리 내 개별 컴포넌트들의 가장 최근 `render` 시간의 지속기간
106106
이 값은 렌더링 비용의 최악 케이스를 계산해줍니다(e.g. 초기 마운트 혹은 메모이제이션이 없는 트리)
107-
* **`startTime: 숫자`** -
107+
* **`startTime: number`** -
108108
React가 현재 업데이트에 대해 렌더링을 시작한 시간의 타임 스탬프.
109-
* **`commitTime: 숫자`** -
109+
* **`commitTime: number`** -
110110
React가 현재 업데이트를 커밋한 시간의 타임 스탬프
111111
This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
112112
이 값은 모든 프로파일러들이 공유하기 때문에 원한다면 그룹을 지을 수 있습니다.
113113
* **`interactions: Set`** -
114-
업데이트가 계획되었을 때 추적하고 있던 ["상호작용"](https://fb.me/react-interaction-tracing)의 집합 (e.g. `렌더` 혹은 `setState`가 호출되었을 때).
114+
업데이트가 계획되었을 때 추적하고 있던 ["상호작용"](https://fb.me/react-interaction-tracing)의 집합 (e.g. `render` 혹은 `setState`가 호출되었을 때).
115115

116116
>주의
117117
>
118118
>상호작용을 추적하는 API는 아직 시험단계에 있지만, 상호작용은 업데이트의 원인을 식별하는데 사용할 수 있습니다
119119
>
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

Comments
 (0)