๐Ÿ’ป Profiler API(feat. ๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ)

hsk10271ยท2022๋…„ 12์›” 2์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
48/50
post-thumbnail

โš ๏ธ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์€ ์˜คํƒ€๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

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

์‚ฌ์šฉ๋ฒ•

Profiler๋Š” React ํŠธ๋ฆฌ ๋‚ด์— ์–ด๋””์—๋‚˜ ์ถ”๊ฐ€๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ ํŠธ๋ฆฌ์˜ ํŠน์ • ๋ถ€๋ถ„์˜ ๋ Œ๋”๋ง ๋น„์šฉ์„ ๊ณ„์‚ฐํ•œ๋‹ค.

render(
  <App>
		// id์™€ onRender์˜ props๋ฅผ ์š”๊ตฌ
    // React ํŠธ๋ฆฌ ๋‚ด ์ปดํฌ๋„ŒํŠธ์— ์—…๋ฐ์ดํŠธ๊ฐ€ ์ปค๋ฐ‹๋˜๋ฉด ํ˜ธ์ถœ๋œ๋‹ค
    <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>
);

onRender ์ฝœ๋ฐฑ

์ด ํ•จ์ˆ˜๋Š” ๋ฌด์—‡์ด ๋ Œ๋”๋ง ๋˜์—ˆ๋Š”์ง€ ๊ทธ๋ฆฌ๊ณ  ์–ผ๋งˆ๋‚˜ ๊ฑธ๋ ธ๋Š”์ง€ ์„ค๋ช…ํ•˜๋Š” ์ž…๋ ฅ๊ฐ’์„ ๋ฐ›๊ฒŒ ๋œ๋‹ค.

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

๐Ÿ”ฅ ๋Š๋‚€์ 

๋ Œ๋”๋ง ์„ฑ๋Šฅ ์ธก์ •์„ ์œ„ํ•ด ๋”ฐ๋กœ ์„ค์น˜ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ Profiler๋งŒ์œผ๋กœ๋„ ๋ Œ๋”๋ง ์†๋„๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ๋˜์—ˆ๋‹ค. ๋‹ค๋‹ค์Œ์—” React Developer Tool์™€ Profiler๋ฅผ ํ™œ์šฉํ•ด์„œ ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ํ•ด์•ผ๊ฒ ๋‹ค.

Refer

profile
๋งค ์ˆœ๊ฐ„ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€