Skip to content

Commit 9ecff32

Browse files
lumirlumirlumirlumir
committed
docs: update Profiler.md 
1 parent 6373184 commit 9ecff32

File tree

2 files changed

+13
-13
lines changed

2 files changed

+13
-13
lines changed

‎src/content/reference/react/Profiler.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: <Profiler>
44

55
<Intro>
66

7-
`<Profiler>`는 프로그래밍 방식으로 React 트리의 렌더링 성능을 측정할 수 있습니다.
7+
`<Profiler>`를 통해 React 트리의 렌더링 성능을 프로그래밍 방식으로 측정할 수 있습니다.
88

99
```js
1010
<Profiler id="App" onRender={onRender}>
@@ -33,16 +33,16 @@ title: <Profiler>
3333
#### Props {/*props*/}
3434

3535
* `id`: 성능을 측정하는 UI 컴포넌트를 식별하기 위한 문자열입니다.
36-
* `onRender`: 프로파일링 된 트리 내의 컴포넌트가 업데이트될 때마다 React가 호출하는 [`onRender` 콜백](#onrender-callback)입니다. 렌더링 된 내용과 소요된 시간에 대한 정보를 받고 있습니다.
36+
* `onRender`: 프로파일링된 트리 내의 컴포넌트가 업데이트될 때마다 React가 호출하는 [`onRender` 콜백](#onrender-callback)입니다. 렌더링된 내용과 소요된 시간에 대한 정보를 받습니다.
3737

3838
#### 주의 사항 {/*caveats*/}
3939

40-
* 프로파일링은 추가적인 오버헤드를 더하기 때문에, **프로덕션 빌드에서는 기본적으로 비활성화가 되어있습니다.** 프로덕션 프로파일링을 사용하려면, [프로파일링 기능이 활성화된 특수한 프로덕션 빌드](https://fb.me/react-profiling)를 사용해야 합니다.
40+
* 프로파일링은 추가적인 오버헤드를 더하기 때문에, **프로덕션 빌드에서는 기본적으로 비활성화 되어있습니다.** 프로덕션 프로파일링을 사용하려면, [프로파일링 기능이 활성화된 특수한 프로덕션 빌드](https://fb.me/react-profiling)를 사용해야 합니다.
4141
---
4242

4343
### `onRender` 콜백 {/*onrender-callback*/}
4444

45-
React는 `onRender` 콜백을 렌더링 된 내용과 같이 호출합니다.
45+
React는 `onRender` 콜백을 렌더링된 내용과 같이 호출합니다.
4646

4747
```js
4848
function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
@@ -53,9 +53,9 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime
5353
#### 매개변수 {/*onrender-parameters*/}
5454

5555
* `id`: 커밋된 `<Profiler>` 트리의 문자열 `id` 프로퍼티입니다. 프로파일러를 다중으로 사용하고 있는 트리 내에서 어떤 부분이 커밋 되었는지 식별할 수 있도록 해줍니다.
56-
* `phase`: `"mount"`, `"update"` 혹은 `"nested-update"`. 트리가 최초로 마운트되었는지 또는 props, state 또는 hook 의 변경으로 인해 리렌더링 되었는지 알 수 있습니다.
57-
* `actualDuration`: 현재 업데이트에 대해 `<Profiler>`와 자식들을 렌더링하는데 소요된 시간(밀리초)입니다. 이는 하위 트리가 memoization을 얼마나 잘 사용하는지를 나타냅니다 (e.g. [`memo`](/reference/react/memo) 와 [`useMemo`](/reference/react/useMemo)). 많은 자식이 특정 props가 변경되는 경우에만 다시 리렌더링이 되어야 하므로 이상적으로는 이 값은 최초 마운트 이후에는 많이 감소해야 합니다.
58-
* `baseDuration`: 최적화 없이 전체 `<Profiler>` 하위트리에 대해 걸리는 시간을 추정하는 소요된 시간(밀리초)입니다. 트리에 있는 각 컴포넌트의 가장 최근 렌더링 시간을 합산하여 계산됩니다. 이 값은 최악의 렌더링 비용(예: 최초 마운트 또는 memoization이 없는 트리)을 추정합니다. `actualDuration` 과 비교하여 memoization이 작동하는지 확인합니다.
56+
* `phase`: `"mount"`, `"update"` 혹은 `"nested-update"`. 트리가 최초로 마운트되었는지 또는 Props, State, Hook의 변경으로 인해 리렌더링 되었는지 알 수 있습니다.
57+
* `actualDuration`: 현재 업데이트에 대해 `<Profiler>`와 자식들을 렌더링하는데 소요된 시간(밀리초)입니다. 이는 하위 트리가 메모이제이션(예: [`memo`](/reference/react/memo)와 [`useMemo`](/reference/react/useMemo))을 얼마나 잘 사용하는지를 나타냅니다. 많은 자식들이 특정 Props가 변경되는 경우에만 다시 렌더링되어야 하므로, 이상적으로는 이 값은 최초 마운트 이후에는 많이 감소해야 합니다.
58+
* `baseDuration`: 최적화 없이 전체 `<Profiler>` 하위 트리에 대해 걸리는 시간을 추정하는 소요된 시간(밀리초)입니다. 트리에 있는 각 컴포넌트의 가장 최근 렌더링 시간을 합산하여 계산됩니다. 이 값은 최악의 렌더링 비용(예: 최초 마운트 또는 메모이제이션이 없는 트리)을 추정합니다. `actualDuration`과 비교하여 메모이제이션이 작동하는지 확인합니다.
5959
* `startTime`: React가 현재 업데이트 렌더링을 시작한 시점에 대한 숫자 타임스탬프입니다.
6060
* `commitTime`: React가 현재 업데이트를 커밋한 시점에 대한 숫자 타임스탬프입니다. 이 값은 커밋된 모든 프로파일러 간에 공유되므로 원하는 경우 그룹화할 수 있습니다.
6161

@@ -76,25 +76,25 @@ React 트리를 `<Profiler>` 컴포넌트로 감싸서 렌더링 성능을 측
7676
</App>
7777
```
7878

79-
트리 내의 컴포넌트가 업데이트를 커밋할 때마다 React가 호출하는 `onRender` 콜백(함수)와 UI 컴포넌트를 식별하기 위한 문자열 `id` (문자열) 두 개의 props가 요구됩니다.
79+
UI 컴포넌트를 식별하기 위한 `id` 문자열과 트리 내의 컴포넌트가 업데이트를 커밋할 때마다 React가 호출하는 `onRender` 콜백 함수 두 개의 Props가 요구됩니다.
8080

8181
<Pitfall>
8282

83-
프로파일링은 추가적인 오버헤드를 더하기 때문에, **프로덕션 빌드에서는 기본적으로 비활성화가 되어있습니다.** 프로덕션 프로파일링을 사용하려면, [프로파일링 기능이 활성화된 특수한 프로덕션 빌드](https://fb.me/react-profiling)를 사용해야 합니다.
83+
프로파일링은 추가적인 오버헤드를 더하기 때문에, **프로덕션 빌드에서는 기본적으로 비활성화 되어있습니다.** 프로덕션 프로파일링을 사용하려면, [프로파일링 기능이 활성화된 특수한 프로덕션 빌드](https://fb.me/react-profiling)를 사용해야 합니다.
8484

8585
</Pitfall>
8686

8787
<Note>
8888

89-
`<Profiler>`는 프로그래밍 방식으로 측정값들을 모아줍니다. 상호작용할 수 있는 프로파일러를 찾고 있다면, [React Developer Tools](/learn/react-developer-tools)의 프로파일러 탭을 사용해 보세요. 브라우저 확장 프로그램으로써 유사한 기능을 제공합니다.
89+
`<Profiler>`는 프로그래밍 방식으로 측정값들을 모아줍니다. 상호작용할 수 있는 프로파일러를 찾고 있다면, [React 개발자 도구](/learn/react-developer-tools)의 프로파일러 탭을 사용해 보세요. 브라우저 확장 프로그램으로써 유사한 기능을 제공합니다.
9090

9191
</Note>
9292

9393
---
9494

9595
### 애플리케이션의 부분별 측정 {/*measuring-different-parts-of-the-application*/}
9696

97-
`<Profiler>` 컴포넌트를 여러 개 사용하여 애플리케이션을 부분별로 측정할 수 있습니다.
97+
`<Profiler>` 컴포넌트를 여러개 사용하여 애플리케이션을 부분별로 측정할 수 있습니다.
9898

9999
```js {5,7}
100100
<App>
@@ -125,7 +125,7 @@ React 트리를 `<Profiler>` 컴포넌트로 감싸서 렌더링 성능을 측
125125
</App>
126126
```
127127

128-
`<Profiler>`는 가벼운 컴포넌트이지만 사용할 때마다 애플리케이션에 약간의 CPU 및 메모리 오버헤드가 추가되기 때문에 필요할 때만 사용해야 합니다.
128+
`<Profiler>`는 가벼운 컴포넌트이지만 사용할 때마다 애플리케이션에 약간의 CPU 및 메모리 오버헤드를 추가하기 때문에 필요할 때만 사용해야 합니다.
129129

130130
---
131131

‎src/content/reference/react/components.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ React는 JSX에서 사용할 수 있는 몇 가지 내장 컴포넌트를 제공
1313
## 내장 컴포넌트 {/*built-in-components*/}
1414

1515
* [`<Fragment>`](/reference/react/Fragment) 또는 `<>...</>` 로 표기하며, 여러 JSX 노드를 함께 그룹화할 수 있습니다.
16-
* [`<Profiler>`](/reference/react/Profiler)를 통해 React 트리의 렌더링 성능을 프로그래밍적으로 측정할 수 있습니다.
16+
* [`<Profiler>`](/reference/react/Profiler)를 통해 React 트리의 렌더링 성능을 프로그래밍 방식으로 측정할 수 있습니다.
1717
* [`<Suspense>`](/reference/react/Suspense)를 통해 자식 컴포넌트를 로딩하는 동안 Fallback을 표시할 수 있습니다.
1818
* [`<StrictMode>`](/reference/react/StrictMode)를 통해 초기에 버그를 찾는 데 도움이 되는 추가 개발 전용 검사를 사용할 수 있습니다.
1919

0 commit comments

Comments
 (0)