We want to hear from you!Take our 2021 Community Survey!
Support Ukraine ๐Ÿ‡บ๐Ÿ‡ฆ Help Provide Humanitarian Aid to Ukraine.

Profiler API

Profiler๋Š” React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋ Œ๋”๋งํ•˜๋Š” ๋นˆ๋„์™€ ๋ Œ๋”๋ง โ€œ๋น„์šฉโ€์„ ์ธก์ •ํ•ฉ๋‹ˆ๋‹ค. Profiler์˜ ๋ชฉ์ ์€ ๋ฉ”๋ชจ์ด์ œ์ด์…˜ ๊ฐ™์€ ์„ฑ๋Šฅ ์ตœ์ ํ™” ๋ฐฉ๋ฒ•์„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋Š๋ฆฐ ๋ถ€๋ถ„๋“ค์„ ์‹๋ณ„ํ•ด๋‚ด๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ฃผ์˜

ํ”„๋กœํŒŒ์ผ๋ง์€ ์•ฝ๊ฐ„์˜ ์˜ค๋ฒ„ํ—ค๋“œ๋ฅผ ๋งŒ๋“ค๊ธฐ ๋•Œ๋ฌธ์— ํ”„๋กœ๋•์…˜ ๋นŒ๋“œ์—์„œ๋Š” ๋น„ํ™œ์„ฑํ™”๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค..

ํ”„๋กœ๋•์…˜์—์„œ ํ”„๋กœํŒŒ์ผ๋ง์„ ํ™œ์„ฑํ™”ํ•˜๊ธธ ์›ํ•˜์‹ ๋‹ค๋ฉด React์—์„œ ์ œ๊ณตํ•˜๋Š” ํŠน๋ณ„ ํ”„๋กœ๋•์…˜ ๋นŒ๋“œ๋ฅผ ํ†ตํ•ด์„œ ํ™œ์„ฑํ™”ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ๋งํฌ์—์„œ ์ด ํŠน๋ณ„ ๋นŒ๋“œ์— ๋Œ€ํ•ด์„œ ๋” ์ฝ์–ด๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค fb.me/react-profiling

์‚ฌ์šฉ๋ฒ•

Profiler๋Š” React ํŠธ๋ฆฌ ๋‚ด์— ์–ด๋””์—๋‚˜ ์ถ”๊ฐ€๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ ํŠธ๋ฆฌ์˜ ํŠน์ • ๋ถ€๋ถ„์˜ ๋ Œ๋”๋ง ๋น„์šฉ์„ ๊ณ„์‚ฐํ•ด์ค๋‹ˆ๋‹ค. ์ด๋Š” ๋‘ ๊ฐ€์ง€ props๋ฅผ ์š”๊ตฌํ•ฉ๋‹ˆ๋‹ค: id (๋ฌธ์ž์—ด) ์™€ onRender ์ฝœ๋ฐฑ (ํ•จ์ˆ˜)์ด๋ฉฐ React ํŠธ๋ฆฌ ๋‚ด ์ปดํฌ๋„ŒํŠธ์— ์—…๋ฐ์ดํŠธ๊ฐ€ โ€œ์ปค๋ฐ‹โ€๋˜๋ฉด ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, Navigation ์ปดํฌ๋„ŒํŠธ์™€ ์ž์† ์ปดํฌ๋„ŒํŠธ๋“ค์„ ํ”„๋กœํŒŒ์ผํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š”

render(
  <App>
    <Profiler id="Navigation" onRender={callback}>      <Navigation {...props} />
    </Profiler>
    <Main {...props} />
  </App>
);

๋ณต์ˆ˜์˜ Profiler ์ปดํฌ๋„ŒํŠธ๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋‹ค๋ฅธ ๋ถ€๋ถ„๋“ค์„ ๊ณ„์‚ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

render(
  <App>
    <Profiler id="Navigation" onRender={callback}>      <Navigation {...props} />
    </Profiler>
    <Profiler id="Main" onRender={callback}>      <Main {...props} />
    </Profiler>
  </App>
);

Profiler ์ปดํฌ๋„ŒํŠธ๋Š” ํ•˜์œ„ ํŠธ๋ฆฌ์˜ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๊ณ„์‚ฐํ•˜๊ธฐ ์œ„ํ•ด ์ค‘์ฒฉํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

render(
  <App>
    <Profiler id="Panel" onRender={callback}>      <Panel {...props}>
        <Profiler id="Content" onRender={callback}>          <Content {...props} />
        </Profiler>
        <Profiler id="PreviewPane" onRender={callback}>          <PreviewPane {...props} />
        </Profiler>
      </Panel>
    </Profiler>
  </App>
);

์ฃผ์˜์‚ฌํ•ญ

Profiler๋Š” ๊ฐ€๋ฒผ์šด ์ปดํฌ๋„ŒํŠธ์ด์ง€๋งŒ ํ•„์š”ํ•  ๋•Œ๋งŒ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ Profiler๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์กฐ๊ธˆ์˜ CPU์™€ ๋ฉ”๋ชจ๋ฆฌ ๋น„์šฉ์„ ์ถ”๊ฐ€ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

onRender ์ฝœ๋ฐฑ

Profiler๋Š” onRender ํ•จ์ˆ˜๋ฅผ prop์œผ๋กœ ์š”๊ตฌํ•ฉ๋‹ˆ๋‹ค. React๋Š” ํ”„๋กœํŒŒ์ผ ํŠธ๋ฆฌ ๋‚ด์˜ ์ปดํฌ๋„ŒํŠธ์— ์—…๋ฐ์ดํŠธ๊ฐ€ โ€œ์ปค๋ฐ‹โ€๋  ๋•Œ๋งˆ๋‹ค ์ด ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ์ด ํ•จ์ˆ˜๋Š” ๋ฌด์—‡์ด ๋ Œ๋”๋ง ๋˜์—ˆ๋Š”์ง€ ๊ทธ๋ฆฌ๊ณ  ์–ผ๋งˆ๋‚˜ ๊ฑธ๋ ธ๋Š”์ง€ ์„ค๋ช…ํ•˜๋Š” ์ž…๋ ฅ๊ฐ’์„ ๋ฐ›๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

function onRenderCallback(
  id, // ๋ฐฉ๊ธˆ ์ปค๋ฐ‹๋œ Profiler ํŠธ๋ฆฌ์˜ "id"
  phase, // "mount" (ํŠธ๋ฆฌ๊ฐ€ ๋ฐฉ๊ธˆ ๋งˆ์šดํŠธ๊ฐ€ ๋œ ๊ฒฝ์šฐ) ํ˜น์€ "update"(ํŠธ๋ฆฌ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋œ ๊ฒฝ์šฐ)
  actualDuration, // ์ปค๋ฐ‹๋œ ์—…๋ฐ์ดํŠธ๋ฅผ ๋ Œ๋”๋งํ•˜๋Š”๋ฐ ๊ฑธ๋ฆฐ ์‹œ๊ฐ„
  baseDuration, // ๋ฉ”๋ชจ์ด์ œ์ด์…˜ ์—†์ด ํ•˜์œ„ ํŠธ๋ฆฌ ์ „์ฒด๋ฅผ ๋ Œ๋”๋งํ•˜๋Š”๋ฐ ๊ฑธ๋ฆฌ๋Š” ์˜ˆ์ƒ์‹œ๊ฐ„ 
  startTime, // React๊ฐ€ ์–ธ์ œ ํ•ด๋‹น ์—…๋ฐ์ดํŠธ๋ฅผ ๋ Œ๋”๋งํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋Š”์ง€
  commitTime, // React๊ฐ€ ํ•ด๋‹น ์—…๋ฐ์ดํŠธ๋ฅผ ์–ธ์ œ ์ปค๋ฐ‹ํ–ˆ๋Š”์ง€
  interactions // ์ด ์—…๋ฐ์ดํŠธ์— ํ•ด๋‹นํ•˜๋Š” ์ƒํ˜ธ์ž‘์šฉ๋“ค์˜ ์ง‘ํ•ฉ
) {
  // ๋ Œ๋”๋ง ํƒ€์ด๋ฐ์„ ์ง‘ํ•ฉํ•˜๊ฑฐ๋‚˜ ๋กœ๊ทธ...
}

๊ฐ prop์— ๋Œ€ํ•ด ์ข€ ๋” ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค

  • id: string - ๋ฐฉ๊ธˆ ์ปค๋ฐ‹๋œ Profiler ํŠธ๋ฆฌ์˜ id prop. ๋ณต์ˆ˜์˜ ํ”„๋กœํŒŒ์ผ๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋ฉด ํŠธ๋ฆฌ์˜ ์–ด๋Š ๋ถ€๋ถ„์ด ์ปค๋ฐ‹๋˜์—‡๋Š”์ง€ ์‹๋ณ„ํ•˜๋Š”๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • phase: "mount" | "update" - ํ•ด๋‹น ํŠธ๋ฆฌ๊ฐ€ ๋ฐฉ๊ธˆ ๋งˆ์šดํŠธ๋œ ๊ฑด์ง€ prop, state ํ˜น์€ hooks์˜ ๋ณ€ํ™”๋กœ ์ธํ•˜์—ฌ ๋ฆฌ๋ Œ๋”๋ง ๋œ ๊ฑด์ง€ ์‹๋ณ„ํ•ฉ๋‹ˆ๋‹ค.
  • actualDuration: number - ํ˜„์žฌ ์—…๋ฐ์ดํŠธ์— ํ•ด๋‹นํ•˜๋Š” Profiler์™€ ์ž์† ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋ Œ๋”ํ•˜๋Š”๋ฐ ๊ฑธ๋ฆฐ ์‹œ๊ฐ„ ์ด๊ฒƒ์€ ํ•˜์œ„ ํŠธ๋ฆฌ๊ฐ€ ์–ผ๋งˆ๋‚˜ ๋ฉ”๋ชจ์ด์ œ์ด์…˜์„ ์ž˜ ํ™œ์šฉํ•˜๊ณ  ์žˆ๋Š”์ง€๋ฅผ ์•”์‹œํ•ฉ๋‹ˆ๋‹ค (e.g. React.memo, useMemo, shouldComponentUpdate). ์ด์ƒ์ ์œผ๋กœ ๋Œ€๋‹ค์ˆ˜์˜ ์ž์† ์ปดํฌ๋„ŒํŠธ๋“ค์€ ํŠน์ • prop์ด ๋ณ€ํ•  ๊ฒฝ์šฐ์—๋งŒ ๋ฆฌ๋ Œ๋”๋ง์ด ํ•„์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด ๊ฐ’์€ ์ดˆ๊ธฐ ๋ Œ๋”๋ง ์ดํ›„์— ์ƒ๋‹น ๋ถ€๋ถ„ ๊ฐ์†Œํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • baseDuration: number - Profiler ํŠธ๋ฆฌ ๋‚ด ๊ฐœ๋ณ„ ์ปดํฌ๋„ŒํŠธ๋“ค์˜ ๊ฐ€์žฅ ์ตœ๊ทผ render ์‹œ๊ฐ„์˜ ์ง€์†๊ธฐ๊ฐ„ ์ด ๊ฐ’์€ ๋ Œ๋”๋ง ๋น„์šฉ์˜ ์ตœ์•… ์ผ€์ด์Šค๋ฅผ ๊ณ„์‚ฐํ•ด์ค๋‹ˆ๋‹ค(e.g. ์ดˆ๊ธฐ ๋งˆ์šดํŠธ ํ˜น์€ ๋ฉ”๋ชจ์ด์ œ์ด์…˜์ด ์—†๋Š” ํŠธ๋ฆฌ)
  • startTime: number - React๊ฐ€ ํ˜„์žฌ ์—…๋ฐ์ดํŠธ์— ๋Œ€ํ•ด ๋ Œ๋”๋ง์„ ์‹œ์ž‘ํ•œ ์‹œ๊ฐ„์˜ ํƒ€์ž„ ์Šคํƒฌํ”„.
  • commitTime: number - React๊ฐ€ ํ˜„์žฌ ์—…๋ฐ์ดํŠธ๋ฅผ ์ปค๋ฐ‹ํ•œ ์‹œ๊ฐ„์˜ ํƒ€์ž„ ์Šคํƒฌํ”„ ์ด ๊ฐ’์€ ๋ชจ๋“  ํ”„๋กœํŒŒ์ผ๋Ÿฌ๋“ค์ด ๊ณต์œ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์›ํ•œ๋‹ค๋ฉด ๊ทธ๋ฃน์„ ์ง€์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • interactions: Set - ์—…๋ฐ์ดํŠธ๊ฐ€ ๊ณ„ํš๋˜์—ˆ์„ ๋•Œ ์ถ”์ ํ•˜๊ณ  ์žˆ๋˜ โ€œ์ƒํ˜ธ์ž‘์šฉโ€์˜ ์ง‘ํ•ฉ (e.g. render ํ˜น์€ setState๊ฐ€ ํ˜ธ์ถœ๋˜์—ˆ์„ ๋•Œ).

์ฃผ์˜

์ƒํ˜ธ์ž‘์šฉ์„ ์ถ”์ ํ•˜๋Š” API๋Š” ์•„์ง ์‹œํ—˜๋‹จ๊ณ„์— ์žˆ์ง€๋งŒ, ์ƒํ˜ธ์ž‘์šฉ์€ ์—…๋ฐ์ดํŠธ์˜ ์›์ธ์„ ์‹๋ณ„ํ•˜๋Š”๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

๋‹ค์Œ์˜ ๋งํฌ์—์„œ ๋” ์ž์„ธํžˆ ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค fb.me/react-interaction-tracing

Is this page useful?Edit this page