React ๊ฐ๋ฐ์ ๋๊ตฌ ํ๋กํ์ผ๋ฌ๋ฅผ ์ฌ์ฉํ์ฌ React ์ฑ์ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ํด๊ฒฐํ๋ ์ข ํฉ ๊ฐ์ด๋. ์ปดํฌ๋ํธ ๋ ๋๋ง ๋ถ์ ๋ฐ ์ต์ ํ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
React ๊ฐ๋ฐ์ ๋๊ตฌ ํ๋กํ์ผ๋ฌ: ์ปดํฌ๋ํธ ์ฑ๋ฅ ๋ถ์ ๋ง์คํฐํ๊ธฐ
์ค๋๋ ์ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ๋๋ฆฌ๊ฑฐ๋ ์ง์ฐ๋๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉ์๋ฅผ ๋น ๋ฅด๊ฒ ์ข์ ์ํค๊ณ ์ดํ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ถ์ ๋๋ฆฌ ์ฌ์ฉ๋๋ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ React๋ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ฌํ ๋๊ตฌ๋ค ์ค์์ React ๊ฐ๋ฐ์ ๋๊ตฌ ํ๋กํ์ผ๋ฌ๋ React ์ ํ๋ฆฌ์ผ์ด์ ๋ด์ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ํด๊ฒฐํ๋ ๋ฐ ์์ด์๋ ์ ๋ ํ์ ๋ฆฌ์์ค๋ก ๋๋ณด์ ๋๋ค.
์ด ์ข ํฉ ๊ฐ์ด๋๋ React ๊ฐ๋ฐ์ ๋๊ตฌ ํ๋กํ์ผ๋ฌ์ ๋ณต์กํ ๋ด์ฉ๋ค์ ์๋ดํ์ฌ, ์ฌ๋ฌ๋ถ์ด ์ปดํฌ๋ํธ ๋ ๋๋ง ๋์์ ๋ถ์ํ๊ณ ๋ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ์ด ์ข์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ต์ ํํ ์ ์๋๋ก ๋์์ค ๊ฒ์ ๋๋ค.
React ๊ฐ๋ฐ์ ๋๊ตฌ ํ๋กํ์ผ๋ฌ๋ ๋ฌด์์ธ๊ฐ?
React ๊ฐ๋ฐ์ ๋๊ตฌ ํ๋กํ์ผ๋ฌ๋ ๋ธ๋ผ์ฐ์ ์ ๊ฐ๋ฐ์ ๋๊ตฌ ํ์ฅ ํ๋ก๊ทธ๋จ์ผ๋ก, React ์ปดํฌ๋ํธ์ ์ฑ๋ฅ ํน์ฑ์ ๊ฒ์ฌํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๋ ์ปดํฌ๋ํธ๊ฐ ์ด๋ป๊ฒ ๋ ๋๋ง๋๋์ง, ๋ ๋๋ง์ ์ผ๋ง๋ ์๊ฐ์ด ๊ฑธ๋ฆฌ๋์ง, ๊ทธ๋ฆฌ๊ณ ์ ๋ค์ ๋ ๋๋ง๋๋์ง์ ๋ํ ๊ท์คํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํฉ๋๋ค. ์ด ์ ๋ณด๋ ์ฑ๋ฅ์ ๊ฐ์ ํ ์ ์๋ ์์ญ์ ์๋ณํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค.
๋จ์ํ ์ ๋ฐ์ ์ธ ์งํ๋ง ๋ณด์ฌ์ฃผ๋ ๊ฐ๋จํ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๋๊ตฌ์ ๋ฌ๋ฆฌ, ํ๋กํ์ผ๋ฌ๋ ์ปดํฌ๋ํธ ์์ค๊น์ง ๊น์ด ํ๊ณ ๋ค์ด ์ฑ๋ฅ ๋ฌธ์ ์ ์ ํํ ์์ธ์ ์ฐพ์๋ผ ์ ์๊ฒ ํด์ค๋๋ค. ๊ฐ ์ปดํฌ๋ํธ์ ๋ ๋๋ง ์๊ฐ์ ๋ํ ์์ธํ ๋ถ์๊ณผ ํจ๊ป ๋ฆฌ๋ ๋๋ง์ ์ ๋ฐํ ์ด๋ฒคํธ์ ๋ํ ์ ๋ณด๋ ์ ๊ณตํฉ๋๋ค.
React ๊ฐ๋ฐ์ ๋๊ตฌ ์ค์น ๋ฐ ์ค์ ํ๊ธฐ
ํ๋กํ์ผ๋ฌ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ ์, ๋ธ๋ผ์ฐ์ ์ React ๊ฐ๋ฐ์ ๋๊ตฌ ํ์ฅ ํ๋ก๊ทธ๋จ์ ์ค์นํด์ผ ํฉ๋๋ค. ์ด ํ์ฅ ํ๋ก๊ทธ๋จ์ Chrome, Firefox, Edge์์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ์ ํ์ฅ ํ๋ก๊ทธ๋จ ์คํ ์ด์์ "React Developer Tools"๋ฅผ ๊ฒ์ํ์ฌ ์ ์ ํ ๋ฒ์ ์ ์ค์นํ์ธ์.
์ค์น๊ฐ ์๋ฃ๋๋ฉด, ๊ฐ๋ฐ์ ๋๊ตฌ๋ ์ฌ๋ฌ๋ถ์ด React ์ ํ๋ฆฌ์ผ์ด์ ์์ ์์ ์ค์ผ ๋ ์ด๋ฅผ ์๋์ผ๋ก ๊ฐ์งํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ด์ด(๋ณดํต F12 ํค๋ฅผ ๋๋ฅด๊ฑฐ๋ ๋ง์ฐ์ค ์ค๋ฅธ์ชฝ ๋ฒํผ์ ํด๋ฆญํ์ฌ "๊ฒ์ฌ"๋ฅผ ์ ํ) ๊ฐ๋ฐ์ ๋๊ตฌ์ ์ ๊ทผํ ์ ์์ต๋๋ค. "โ๏ธ Components"์ "โ๏ธ Profiler" ํญ์ด ๋ณด์ผ ๊ฒ์ ๋๋ค.
ํ๋ก๋์ ๋น๋์์ ํธํ์ฑ ํ์ธ
ํ๋กํ์ผ๋ฌ๋ ๋งค์ฐ ์ ์ฉํ์ง๋ง, ์ฃผ๋ก ๊ฐ๋ฐ ํ๊ฒฝ์ ์ํด ์ค๊ณ๋์๋ค๋ ์ ์ ์ ๋ ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ํ๋ก๋์ ๋น๋์์ ์ฌ์ฉํ๋ฉด ์๋นํ ์ค๋ฒํค๋๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. ๊ฐ์ฅ ์ ํํ๊ณ ๊ด๋ จ์ฑ ์๋ ๋ฐ์ดํฐ๋ฅผ ์ป์ผ๋ ค๋ฉด ๊ฐ๋ฐ ๋น๋(`NODE_ENV=development`)๋ฅผ ํ๋กํ์ผ๋งํ๊ณ ์๋์ง ํ์ธํ์ธ์. ํ๋ก๋์ ๋น๋๋ ์ผ๋ฐ์ ์ผ๋ก ์๋์ ์ต์ ํ๋์ด ์์ผ๋ฉฐ, ๊ฐ๋ฐ์ ๋๊ตฌ์ ํ์ํ ์์ธํ ํ๋กํ์ผ๋ง ์ ๋ณด๊ฐ ํฌํจ๋์ด ์์ง ์์ ์ ์์ต๋๋ค.
React ๊ฐ๋ฐ์ ๋๊ตฌ ํ๋กํ์ผ๋ฌ ์ฌ์ฉ๋ฒ: ๋จ๊ณ๋ณ ๊ฐ์ด๋
์ด์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ค์นํ์ผ๋, ํ๋กํ์ผ๋ฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ ์ฑ๋ฅ์ ๋ถ์ํ๋ ๋ฐฉ๋ฒ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
1. ํ๋กํ์ผ๋ง ์ธ์ ์์ํ๊ธฐ
ํ๋กํ์ผ๋ง ์ธ์ ์ ์์ํ๋ ค๋ฉด React ๊ฐ๋ฐ์ ๋๊ตฌ์ "โ๏ธ Profiler" ํญ์ผ๋ก ์ด๋ํ์ธ์. "Start profiling"์ด๋ผ๊ณ ํ์๋ ์ํ ๋ฒํผ์ด ๋ณด์ผ ๊ฒ์ ๋๋ค. ์ด ๋ฒํผ์ ํด๋ฆญํ์ฌ ์ฑ๋ฅ ๋ฐ์ดํฐ ๊ธฐ๋ก์ ์์ํฉ๋๋ค.
์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ํธ์์ฉํ๋ ๋์ ํ๋กํ์ผ๋ฌ๋ ๊ฐ ์ปดํฌ๋ํธ์ ๋ ๋๋ง ์๊ฐ์ ๊ธฐ๋กํฉ๋๋ค. ๋ถ์ํ๋ ค๋ ์ฌ์ฉ์ ํ๋์ ์๋ฎฌ๋ ์ด์ ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๊ฒ์ ๊ธฐ๋ฅ์ ์ฑ๋ฅ์ ์กฐ์ฌํ๋ ๊ฒฝ์ฐ, ๊ฒ์์ ์ํํ๊ณ ํ๋กํ์ผ๋ฌ์ ์ถ๋ ฅ์ ๊ด์ฐฐํ์ธ์.
2. ํ๋กํ์ผ๋ง ์ธ์ ์ค์งํ๊ธฐ
์ถฉ๋ถํ ๋ฐ์ดํฐ๋ฅผ ์บก์ฒํ ํ์๋ "Stop profiling" ๋ฒํผ("Start profiling" ๋ฒํผ์ ๋์ฒดํจ)์ ํด๋ฆญํฉ๋๋ค. ๊ทธ๋ฌ๋ฉด ํ๋กํ์ผ๋ฌ๊ฐ ๊ธฐ๋ก๋ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ํ์ํฉ๋๋ค.
3. ํ๋กํ์ผ๋ง ๊ฒฐ๊ณผ ์ดํดํ๊ธฐ
ํ๋กํ์ผ๋ฌ๋ ์ฌ๋ฌ ๊ฐ์ง ๋ฐฉ์์ผ๋ก ๊ฒฐ๊ณผ๋ฅผ ์ ์ํ๋ฉฐ, ๊ฐ ๋ฐฉ์์ ์ปดํฌ๋ํธ ์ฑ๋ฅ์ ๋ํ ๋ค๋ฅธ ๊ด์ ์ ์ ๊ณตํฉ๋๋ค.
A. ํ๋ ์ ์ฐจํธ(Flame Chart)
ํ๋ ์ ์ฐจํธ๋ ์ปดํฌ๋ํธ ๋ ๋๋ง ์๊ฐ์ ์๊ฐ์ ์ผ๋ก ํํํ ๊ฒ์ ๋๋ค. ์ฐจํธ์ ๊ฐ ๋ง๋๋ ์ปดํฌ๋ํธ๋ฅผ ๋ํ๋ด๋ฉฐ, ๋ง๋์ ๋๋น๋ ํด๋น ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๋ ๋ฐ ์์๋ ์๊ฐ์ ๋ํ๋ ๋๋ค. ๋ง๋๊ฐ ๊ธธ์๋ก ๋ ๋๋ง ์๊ฐ์ด ๋ ๊ธธ๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ์ฐจํธ๋ ์๊ฐ ์์๋๋ก ๊ตฌ์ฑ๋์ด ์ปดํฌ๋ํธ ๋ ๋๋ง ์ด๋ฒคํธ์ ์์๋ฅผ ๋ณด์ฌ์ค๋๋ค.
ํ๋ ์ ์ฐจํธ ํด์ํ๊ธฐ:
- ๋์ ๋ง๋: ์ด ์ปดํฌ๋ํธ๋ค์ ๋ ๋๋งํ๋ ๋ฐ ์๊ฐ์ด ๋ ์ค๋ ๊ฑธ๋ฆฌ๋ฉฐ ์ ์ฌ์ ์ธ ๋ณ๋ชฉ ์ง์ ์ ๋๋ค.
- ๋์ ์คํ: ๋ ๋๋ง์ด ๋ฐ๋ณต์ ์ผ๋ก ๋ฐ์ํ๋ ๊น์ ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ฅผ ๋ํ๋ ๋๋ค.
- ์์: ์ปดํฌ๋ํธ๋ ๋ ๋๋ง ์๊ฐ์ ๋ฐ๋ผ ์์์ผ๋ก ๊ตฌ๋ถ๋์ด ์ฑ๋ฅ ํซ์คํ์ ๋น ๋ฅด๊ฒ ์๊ฐ์ ์ผ๋ก ํ์ ํ ์ ์์ต๋๋ค. ๋ง๋ ์์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด ์ปดํฌ๋ํธ ์ด๋ฆ, ๋ ๋๋ง ์๊ฐ, ๋ฆฌ๋ ๋๋ง ์ด์ ๋ฑ ์์ธํ ์ ๋ณด๊ฐ ํ์๋ฉ๋๋ค.
์: ํ๋ ์ ์ฐจํธ์์ `ProductList`๋ผ๋ ์ปดํฌ๋ํธ๊ฐ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ณด๋ค ํจ์ฌ ๋์ ๋ง๋๋ฅผ ๊ฐ์ง๊ณ ์๋ค๊ณ ์์ํด ๋ณด์ธ์. ์ด๋ `ProductList` ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋๋ ๋ฐ ์ค๋ ์๊ฐ์ด ๊ฑธ๋ฆฐ๋ค๋ ๊ฒ์ ์์ฌํฉ๋๋ค. ๊ทธ๋ฌ๋ฉด ๋นํจ์จ์ ์ธ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ, ๋ณต์กํ ๊ณ์ฐ ๋๋ ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง๊ณผ ๊ฐ์ ๋๋ฆฐ ๋ ๋๋ง์ ์์ธ์ ์๋ณํ๊ธฐ ์ํด `ProductList` ์ปดํฌ๋ํธ๋ฅผ ์กฐ์ฌํด์ผ ํฉ๋๋ค.
B. ์์ ์ฐจํธ(Ranked Chart)
์์ ์ฐจํธ๋ ์ด ๋ ๋๋ง ์๊ฐ์ ๊ธฐ์ค์ผ๋ก ์ ๋ ฌ๋ ์ปดํฌ๋ํธ ๋ชฉ๋ก์ ๋ณด์ฌ์ค๋๋ค. ์ด ์ฐจํธ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ฒด ๋ ๋๋ง ์๊ฐ์ ๊ฐ์ฅ ๋ง์ด ๊ธฐ์ฌํ๋ ์ปดํฌ๋ํธ๋ฅผ ๋น ๋ฅด๊ฒ ํ์ ํ ์ ์๊ฒ ํด์ค๋๋ค. ์ต์ ํ๊ฐ ํ์ํ "๋ฌด๊ฑฐ์ด" ์ปดํฌ๋ํธ๋ฅผ ์๋ณํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค.
์์ ์ฐจํธ ํด์ํ๊ธฐ:
- ์์ ์ปดํฌ๋ํธ: ์ด ์ปดํฌ๋ํธ๋ค์ ๋ ๋๋งํ๋ ๋ฐ ๊ฐ์ฅ ์๊ฐ์ด ๋ง์ด ์์๋๋ฏ๋ก ์ต์ ํ๋ฅผ ์ฐ์ ์ ์ผ๋ก ๊ณ ๋ คํด์ผ ํฉ๋๋ค.
- ์ปดํฌ๋ํธ ์ธ๋ถ ์ ๋ณด: ์ฐจํธ๋ ๊ฐ ์ปดํฌ๋ํธ์ ์ด ๋ ๋๋ง ์๊ฐ, ํ๊ท ๋ ๋๋ง ์๊ฐ ๋ฐ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋ ํ์๋ฅผ ํ์ํฉ๋๋ค.
์: `ShoppingCart` ์ปดํฌ๋ํธ๊ฐ ์์ ์ฐจํธ์ ๋งจ ์์ ๋ํ๋๋ค๋ฉด, ์ด๋ ์ผํ ์นดํธ๋ฅผ ๋ ๋๋งํ๋ ๊ฒ์ด ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์์ ๋ํ๋ ๋๋ค. ๊ทธ๋ฌ๋ฉด ์นดํธ ํญ๋ชฉ์ ๋นํจ์จ์ ์ธ ์ ๋ฐ์ดํธ๋ ๊ณผ๋ํ ๋ฆฌ๋ ๋๋ง๊ณผ ๊ฐ์ ์์ธ์ ์๋ณํ๊ธฐ ์ํด `ShoppingCart` ์ปดํฌ๋ํธ๋ฅผ ๊ฒํ ํ ์ ์์ต๋๋ค.
C. ์ปดํฌ๋ํธ ๋ทฐ(Component View)
์ปดํฌ๋ํธ ๋ทฐ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ๋ณ ์ปดํฌ๋ํธ์ ๋ ๋๋ง ๋์์ ๊ฒ์ฌํ ์ ์์ต๋๋ค. ํ๋ ์ ์ฐจํธ๋ ์์ ์ฐจํธ์์ ์ปดํฌ๋ํธ๋ฅผ ์ ํํ์ฌ ๋ ๋๋ง ๊ธฐ๋ก์ ๋ํ ์์ธํ ์ ๋ณด๋ฅผ ๋ณผ ์ ์์ต๋๋ค.
์ปดํฌ๋ํธ ๋ทฐ ํด์ํ๊ธฐ:
- ๋ ๋๋ง ๊ธฐ๋ก: ์ด ๋ทฐ๋ ํ๋กํ์ผ๋ง ์ธ์ ๋์ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋ ๋ชจ๋ ์๊ฐ์ ๋ชฉ๋ก์ผ๋ก ํ์ํฉ๋๋ค.
- ๋ฆฌ๋ ๋๋ง ์ด์ : ๊ฐ ๋ ๋๋ง์ ๋ํด props ๋ณ๊ฒฝ, state ๋ณ๊ฒฝ ๋๋ ๊ฐ์ ์ ๋ฐ์ดํธ์ ๊ฐ์ ๋ฆฌ๋ ๋๋ง ์ด์ ๋ฅผ ํ์ํฉ๋๋ค.
- ๋ ๋๋ง ์๊ฐ: ๊ฐ ์ธ์คํด์ค์ ๋ํด ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๋ ๋ฐ ๊ฑธ๋ฆฐ ์๊ฐ์ ํ์ํฉ๋๋ค.
- Props์ State: ๊ฐ ๋ ๋๋ง ์์ ์ ์ปดํฌ๋ํธ props์ state๋ฅผ ๊ฒ์ฌํ ์ ์์ต๋๋ค. ์ด๋ ์ด๋ค ๋ฐ์ดํฐ ๋ณ๊ฒฝ์ด ๋ฆฌ๋ ๋๋ง์ ์ ๋ฐํ๋์ง ์ดํดํ๋ ๋ฐ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.
์: `UserProfile` ์ปดํฌ๋ํธ์ ์ปดํฌ๋ํธ ๋ทฐ๋ฅผ ๊ฒํ ํจ์ผ๋ก์จ, `UserProfile` ์ปดํฌ๋ํธ๊ฐ ์จ๋ผ์ธ ์ํ๋ฅผ ํ์ํ์ง ์์์๋ ๋ถ๊ตฌํ๊ณ ์ฌ์ฉ์์ ์จ๋ผ์ธ ์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๋ถํ์ํ๊ฒ ๋ฆฌ๋ ๋๋ง๋๋ ๊ฒ์ ๋ฐ๊ฒฌํ ์ ์์ต๋๋ค. ์ด๋ ์ปดํฌ๋ํธ๊ฐ ์ ๋ฐ์ดํธํ ํ์๊ฐ ์์์๋ ๋ถ๊ตฌํ๊ณ ๋ฆฌ๋ ๋๋ง์ ์ ๋ฐํ๋ props๋ฅผ ๋ฐ๊ณ ์์์ ์์ฌํฉ๋๋ค. ๊ทธ๋ฌ๋ฉด ์จ๋ผ์ธ ์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋์ง ์๋๋ก ํ์ฌ ์ต์ ํํ ์ ์์ต๋๋ค.
4. ํ๋กํ์ผ๋ง ๊ฒฐ๊ณผ ํํฐ๋งํ๊ธฐ
ํ๋กํ์ผ๋ฌ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ์์ญ์ ์ง์คํ๋ ๋ฐ ๋์์ด ๋๋ ํํฐ๋ง ์ต์ ์ ์ ๊ณตํฉ๋๋ค. ์ปดํฌ๋ํธ ์ด๋ฆ, ๋ ๋๋ง ์๊ฐ ๋๋ ๋ฆฌ๋ ๋๋ง ์ด์ ๋ก ํํฐ๋งํ ์ ์์ต๋๋ค. ์ด๋ ๋ง์ ์ปดํฌ๋ํธ๊ฐ ์๋ ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ถ์ํ ๋ ํนํ ์ ์ฉํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ๋ ๋๋งํ๋ ๋ฐ 10ms ์ด์ ๊ฑธ๋ฆฐ ์ปดํฌ๋ํธ๋ง ํ์ํ๋๋ก ๊ฒฐ๊ณผ๋ฅผ ํํฐ๋งํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๊ฐ์ฅ ์๊ฐ์ด ๋ง์ด ๊ฑธ๋ฆฌ๋ ์ปดํฌ๋ํธ๋ฅผ ๋น ๋ฅด๊ฒ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
์ผ๋ฐ์ ์ธ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์๊ณผ ์ต์ ํ ๊ธฐ๋ฒ
React ๊ฐ๋ฐ์ ๋๊ตฌ ํ๋กํ์ผ๋ฌ๋ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ์ผ๋จ ์๋ณ๋๋ฉด, ๋ค์ํ ์ต์ ํ ๊ธฐ๋ฒ์ ์ ์ฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
1. ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง
React ์ ํ๋ฆฌ์ผ์ด์ ์์ ๊ฐ์ฅ ํํ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์ ์ค ํ๋๋ ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ ๋๋ค. ์ปดํฌ๋ํธ๋ props๋ state๊ฐ ๋ณ๊ฒฝ๋ ๋ ๋ฆฌ๋ ๋๋ง๋ฉ๋๋ค. ๊ทธ๋ฌ๋ ๋๋ก๋ props๋ state๊ฐ ์ค์ ๋ก ์ถ๋ ฅ์ ์ํฅ์ ๋ฏธ์น๋ ๋ฐฉ์์ผ๋ก ๋ณ๊ฒฝ๋์ง ์์์์๋ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋๋ ๊ฒฝ์ฐ๊ฐ ์์ต๋๋ค.
์ต์ ํ ๊ธฐ๋ฒ:
- `React.memo()`: ํจ์ํ ์ปดํฌ๋ํธ๋ฅผ `React.memo()`๋ก ๊ฐ์ธ props๊ฐ ๋ณ๊ฒฝ๋์ง ์์์ ๋ ๋ฆฌ๋ ๋๋ง์ ๋ฐฉ์งํฉ๋๋ค. `React.memo`๋ props์ ์์ ๋น๊ต๋ฅผ ์ํํ๊ณ props๊ฐ ๋ค๋ฅธ ๊ฒฝ์ฐ์๋ง ์ปดํฌ๋ํธ๋ฅผ ๋ฆฌ๋ ๋๋งํฉ๋๋ค.
- `PureComponent`: ํด๋์ค ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ `Component` ๋์ `PureComponent`๋ฅผ ์ฌ์ฉํฉ๋๋ค. `PureComponent`๋ ๋ฆฌ๋ ๋๋ง ์ ์ props์ state ๋ชจ๋์ ๋ํด ์์ ๋น๊ต๋ฅผ ์ํํฉ๋๋ค.
- `shouldComponentUpdate()`: ํด๋์ค ์ปดํฌ๋ํธ์์ `shouldComponentUpdate()` ์๋ช ์ฃผ๊ธฐ ๋ฉ์๋๋ฅผ ๊ตฌํํ์ฌ ์ปดํฌ๋ํธ๊ฐ ์ธ์ ๋ฆฌ๋ ๋๋ง๋์ด์ผ ํ๋์ง๋ฅผ ์๋์ผ๋ก ์ ์ดํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋ฆฌ๋ ๋๋ง ๋์์ ์ธ๋ฐํ๊ฒ ์ ์ดํ ์ ์์ต๋๋ค.
- ๋ถ๋ณ์ฑ(Immutability): ๋ถ๋ณ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ์ฌ์ฉํ์ฌ props์ state์ ๋ณ๊ฒฝ์ด ์ฌ๋ฐ๋ฅด๊ฒ ๊ฐ์ง๋๋๋ก ํฉ๋๋ค. ๋ถ๋ณ์ฑ์ ๋ฐ์ดํฐ๋ฅผ ๋น๊ตํ๊ณ ๋ฆฌ๋ ๋๋ง์ด ํ์ํ์ง ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ๋ ๊ฒ์ ๋ ์ฝ๊ฒ ๋ง๋ญ๋๋ค. Immutable.js์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- ๋ฉ๋ชจ์ด์ ์ด์ (Memoization): ๋ฉ๋ชจ์ด์ ์ด์ ๊ธฐ๋ฒ์ ์ฌ์ฉํ์ฌ ๋น์ฉ์ด ๋ง์ด ๋๋ ๊ณ์ฐ ๊ฒฐ๊ณผ๋ฅผ ์บ์ํ๊ณ ๋ถํ์ํ๊ฒ ๋ค์ ๊ณ์ฐํ๋ ๊ฒ์ ํผํฉ๋๋ค. React ํ ์ `useMemo`์ `useCallback`์ด ๋์์ด ๋ ์ ์์ต๋๋ค.
์: ์ฌ์ฉ์์ ํ๋กํ ์ ๋ณด๋ฅผ ํ์ํ๋ `UserProfileCard` ์ปดํฌ๋ํธ๊ฐ ์๋ค๊ณ ๊ฐ์ ํด ๋ณด๊ฒ ์ต๋๋ค. `UserProfileCard` ์ปดํฌ๋ํธ๊ฐ ์จ๋ผ์ธ ์ํ๋ฅผ ํ์ํ์ง ์์์๋ ๋ถ๊ตฌํ๊ณ ์ฌ์ฉ์์ ์จ๋ผ์ธ ์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๋ฆฌ๋ ๋๋ง๋๋ค๋ฉด, `React.memo()`๋ก ๊ฐ์ธ์ ์ต์ ํํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฌ์ฉ์์ ํ๋กํ ์ ๋ณด๊ฐ ์ค์ ๋ก ๋ณ๊ฒฝ๋์ง ์๋ ํ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
2. ๋น์ฉ์ด ๋ง์ด ๋๋ ๊ณ์ฐ
๋ณต์กํ ๊ณ์ฐ๊ณผ ๋ฐ์ดํฐ ๋ณํ์ ๋ ๋๋ง ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง ์ค์ ๋น์ฉ์ด ๋ง์ด ๋๋ ๊ณ์ฐ์ ์ํํ๋ฉด ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋๋ ค์ง ์ ์์ต๋๋ค.
์ต์ ํ ๊ธฐ๋ฒ:
- ๋ฉ๋ชจ์ด์ ์ด์ (Memoization): `useMemo`๋ฅผ ์ฌ์ฉํ์ฌ ๋น์ฉ์ด ๋ง์ด ๋๋ ๊ณ์ฐ ๊ฒฐ๊ณผ๋ฅผ ๋ฉ๋ชจ์ด์ฆํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ ๋ ฅ์ด ๋ณ๊ฒฝ๋ ๋๋ง ๊ณ์ฐ์ด ์ํ๋ฉ๋๋ค.
- ์น ์์ปค(Web Workers): ๋น์ฉ์ด ๋ง์ด ๋๋ ๊ณ์ฐ์ ์น ์์ปค๋ก ์ด๋ํ์ฌ ๋ฉ์ธ ์ค๋ ๋๊ฐ ์ฐจ๋จ๋๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค. ์น ์์ปค๋ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์คํ๋๋ฉฐ ์ฌ์ฉ์ ์ธํฐํ์ด์ค์ ๋ฐ์์ฑ์ ์ํฅ์ ์ฃผ์ง ์๊ณ ๊ณ์ฐ์ ์ํํ ์ ์์ต๋๋ค.
- ๋๋ฐ์ด์ฑ๊ณผ ์ค๋กํ๋ง(Debouncing and Throttling): ๋๋ฐ์ด์ฑ ๋ฐ ์ค๋กํ๋ง ๊ธฐ๋ฒ์ ์ฌ์ฉํ์ฌ ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ ์ ๋น๋๋ฅผ ์ ํํฉ๋๋ค. ๋๋ฐ์ด์ฑ์ ๋ง์ง๋ง ํธ์ถ ์ดํ ์ผ์ ์๊ฐ์ด ๊ฒฝ๊ณผํ ํ์๋ง ํจ์๊ฐ ํธ์ถ๋๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ค๋กํ๋ง์ ํจ์๊ฐ ํน์ ๋น์จ๋ก๋ง ํธ์ถ๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
- ์บ์ฑ(Caching): ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ ์ ๊ฒฐ๊ณผ๋ฅผ ๋ก์ปฌ ์คํ ๋ฆฌ์ง๋ ์๋ฒ ์ธก ์บ์์ ์บ์ํ์ฌ ๋ถํ์ํ๊ฒ ๋ค์ ๊ณ์ฐํ๋ ๊ฒ์ ํผํฉ๋๋ค.
์: ์ ํ ์นดํ ๊ณ ๋ฆฌ์ ์ด ๋งค์ถ์ ๊ณ์ฐํ๋ ๊ฒ๊ณผ ๊ฐ์ ๋ณต์กํ ๋ฐ์ดํฐ ์ง๊ณ๋ฅผ ์ํํ๋ ์ปดํฌ๋ํธ๊ฐ ์๋ ๊ฒฝ์ฐ, `useMemo`๋ฅผ ์ฌ์ฉํ์ฌ ์ง๊ณ ๊ฒฐ๊ณผ๋ฅผ ๋ฉ๋ชจ์ด์ฆํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ ํ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง ์ง๊ณ๊ฐ ์ํ๋๊ณ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋ ๋๋ง๋ค ์ํ๋๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
3. ํฐ ์ปดํฌ๋ํธ ํธ๋ฆฌ
๊น๊ฒ ์ค์ฒฉ๋ ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ผ๊ธฐํ ์ ์์ต๋๋ค. ๊น์ ํธ๋ฆฌ์ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋๋ฉด, ์ ๋ฐ์ดํธํ ํ์๊ฐ ์๋ ๋ชจ๋ ์์ ์ปดํฌ๋ํธ๋ ๋ฆฌ๋ ๋๋ง๋ฉ๋๋ค.
์ต์ ํ ๊ธฐ๋ฒ:
- ์ปดํฌ๋ํธ ๋ถํ : ํฐ ์ปดํฌ๋ํธ๋ฅผ ๋ ์๊ณ ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ์ปดํฌ๋ํธ๋ก ๋ถํ ํฉ๋๋ค. ์ด๋ ๋ฆฌ๋ ๋๋ง์ ๋ฒ์๋ฅผ ์ค์ด๊ณ ์ ๋ฐ์ ์ธ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
- ๊ฐ์ํ(Virtualization): ๊ฐ์ํ ๊ธฐ๋ฒ์ ์ฌ์ฉํ์ฌ ํฐ ๋ชฉ๋ก์ด๋ ํ ์ด๋ธ์ ๋ณด์ด๋ ๋ถ๋ถ๋ง ๋ ๋๋งํฉ๋๋ค. ์ด๋ ๋ ๋๋งํด์ผ ํ ์ปดํฌ๋ํธ ์๋ฅผ ํฌ๊ฒ ์ค์ด๊ณ ์คํฌ๋กค ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค. `react-virtualized` ๋ฐ `react-window`์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- ์ฝ๋ ๋ถํ (Code Splitting): ์ฝ๋ ๋ถํ ์ ์ฌ์ฉํ์ฌ ํน์ ์ปดํฌ๋ํธ๋ ๋ผ์ฐํธ์ ํ์ํ ์ฝ๋๋ง ๋ก๋ํฉ๋๋ค. ์ด๋ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ์ค์ด๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ฐ์ ์ธ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
์: ๋ง์ ํ๋๊ฐ ์๋ ํฐ ์์์ด ์๋ ๊ฒฝ์ฐ, `AddressForm`, `ContactForm`, `PaymentForm`๊ณผ ๊ฐ์ ๋ ์์ ์ปดํฌ๋ํธ๋ก ๋ถํ ํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฌ์ฉ์๊ฐ ์์์ ๋ณ๊ฒฝํ ๋ ๋ฆฌ๋ ๋๋งํด์ผ ํ๋ ์ปดํฌ๋ํธ ์๊ฐ ์ค์ด๋ญ๋๋ค.
4. ๋นํจ์จ์ ์ธ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ
๋นํจ์จ์ ์ธ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ๋๋ฌด ๋ง์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ฑฐ๋ ๋๋ฌด ๋ง์ ์์ฒญ์ ๋ณด๋ด๋ฉด ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋๋ ค์ง๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ด ์ ํ๋ ์ ์์ต๋๋ค.
์ต์ ํ ๊ธฐ๋ฒ:
- ํ์ด์ง๋ค์ด์ (Pagination): ํ์ด์ง๋ค์ด์ ์ ๊ตฌํํ์ฌ ๋ฐ์ดํฐ๋ฅผ ๋ ์์ ๋ฉ์ด๋ฆฌ๋ก ๋ก๋ํฉ๋๋ค. ์ด๋ ํ ๋ฒ์ ์ ์กํ๊ณ ์ฒ๋ฆฌํด์ผ ํ๋ ๋ฐ์ดํฐ์ ์์ ์ค์ ๋๋ค.
- GraphQL: GraphQL์ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ์ ํ์ํ ๋ฐ์ดํฐ๋ง ๊ฐ์ ธ์ต๋๋ค. GraphQL์ ์ฌ์ฉํ๋ฉด ์ ํํ ๋ฐ์ดํฐ ์๊ตฌ ์ฌํญ์ ์ง์ ํ๊ณ ๊ณผ๋ํ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ๋ฅผ ํผํ ์ ์์ต๋๋ค.
- ์บ์ฑ(Caching): ํด๋ผ์ด์ธํธ ์ธก ๋๋ ์๋ฒ ์ธก์ ๋ฐ์ดํฐ๋ฅผ ์บ์ํ์ฌ ๋ฐฑ์๋๋ก์ ์์ฒญ ์๋ฅผ ์ค์ ๋๋ค.
- ์ง์ฐ ๋ก๋ฉ(Lazy Loading): ํ์ํ ๋๋ง ๋ฐ์ดํฐ๋ฅผ ๋ก๋ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ด๋ฏธ์ง๊ฐ ๋ทฐ๋ก ์คํฌ๋กค๋ ๋ ์ง์ฐ ๋ก๋ฉํ ์ ์์ต๋๋ค.
์: ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ๋ชจ๋ ์ ํ์ ํ ๋ฒ์ ๊ฐ์ ธ์ค๋ ๋์ , ํ์ด์ง๋ค์ด์ ์ ๊ตฌํํ์ฌ ์ ํ์ ๋ ์์ ๋ฐฐ์น๋ก ๋ก๋ํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ด๊ธฐ ๋ก๋ ์๊ฐ์ด ์ค์ด๋ค๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ฐ์ ์ธ ์ฑ๋ฅ์ด ํฅ์๋ฉ๋๋ค.
5. ํฐ ์ด๋ฏธ์ง ๋ฐ ์์ฐ
ํฐ ์ด๋ฏธ์ง์ ์์ฐ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ก๋ ์๊ฐ์ ํฌ๊ฒ ๋๋ฆด ์ ์์ต๋๋ค. ์ด๋ฏธ์ง์ ์์ฐ์ ์ต์ ํํ๋ฉด ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ณ ๋์ญํญ ์๋น๋ฅผ ์ค์ผ ์ ์์ต๋๋ค.
์ต์ ํ ๊ธฐ๋ฒ:
- ์ด๋ฏธ์ง ์์ถ: ํ์ง ์ ํ ์์ด ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ธฐ ์ํด ์ด๋ฏธ์ง๋ฅผ ์์ถํฉ๋๋ค. ImageOptim ๋ฐ TinyPNG์ ๊ฐ์ ๋๊ตฌ๊ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- ์ด๋ฏธ์ง ๋ฆฌ์ฌ์ด์ง: ๋์คํ๋ ์ด์ ์ ํฉํ ํฌ๊ธฐ๋ก ์ด๋ฏธ์ง๋ฅผ ์กฐ์ ํฉ๋๋ค. ๋ถํ์ํ๊ฒ ํฐ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ์ง ๋ง์ธ์.
- ์ง์ฐ ๋ก๋ฉ(Lazy Loading): ์ด๋ฏธ์ง๊ฐ ๋ทฐ๋ก ์คํฌ๋กค๋ ๋ ์ง์ฐ ๋ก๋ฉํฉ๋๋ค.
- ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN): CDN์ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์๊ฒ ์ง๋ฆฌ์ ์ผ๋ก ๋ ๊ฐ๊น์ด ์๋ฒ์์ ์์ฐ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ ์ง์ฐ ์๊ฐ์ ์ค์ด๊ณ ๋ค์ด๋ก๋ ์๋๋ฅผ ํฅ์์ํต๋๋ค.
- WebP ํ์: JPEG ๋ฐ PNG๋ณด๋ค ๋ ๋์ ์์ถ์ ์ ๊ณตํ๋ WebP ์ด๋ฏธ์ง ํ์์ ์ฌ์ฉํฉ๋๋ค.
์: ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐฐํฌํ๊ธฐ ์ ์ TinyPNG์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ ์ด๋ฏธ์ง๋ฅผ ์์ถํ์ธ์. ์ด๋ ๊ฒ ํ๋ฉด ์ด๋ฏธ์ง์ ํ์ผ ํฌ๊ธฐ๊ฐ ์ค์ด๋ค๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ก๋ ์๊ฐ์ด ํฅ์๋ฉ๋๋ค.
๊ณ ๊ธ ํ๋กํ์ผ๋ง ๊ธฐ๋ฒ
๊ธฐ๋ณธ์ ์ธ ํ๋กํ์ผ๋ง ๊ธฐ๋ฒ ์ธ์๋ React ๊ฐ๋ฐ์ ๋๊ตฌ ํ๋กํ์ผ๋ฌ๋ ๋ณต์กํ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์๋ณํ๊ณ ํด๊ฒฐํ๋ ๋ฐ ๋์์ด ๋๋ ๋ช ๊ฐ์ง ๊ณ ๊ธ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
1. ์ํธ์์ฉ ํ๋กํ์ผ๋ฌ(Interactions Profiler)
์ํธ์์ฉ ํ๋กํ์ผ๋ฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฒํผ ํด๋ฆญ์ด๋ ์์ ์ ์ถ๊ณผ ๊ฐ์ ํน์ ์ฌ์ฉ์ ์ํธ์์ฉ์ ์ฑ๋ฅ์ ๋ถ์ํ ์ ์์ต๋๋ค. ์ด๋ ํน์ ์ฌ์ฉ์ ์ํฌํ๋ก์ ํน์ ํ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค.
์ํธ์์ฉ ํ๋กํ์ผ๋ฌ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ํ๋กํ์ผ๋ฌ์ "Interactions" ํญ์ ์ ํํ๊ณ "Record" ๋ฒํผ์ ํด๋ฆญํ์ธ์. ๊ทธ๋ฐ ๋ค์ ๋ถ์ํ๋ ค๋ ์ฌ์ฉ์ ์ํธ์์ฉ์ ์ํํฉ๋๋ค. ์ํธ์์ฉ์ ๋ง์น ํ "Stop" ๋ฒํผ์ ํด๋ฆญํฉ๋๋ค. ๊ทธ๋ฌ๋ฉด ํ๋กํ์ผ๋ฌ๊ฐ ์ํธ์์ฉ์ ๊ด๋ จ๋ ๊ฐ ์ปดํฌ๋ํธ์ ๋ ๋๋ง ์๊ฐ์ ๋ณด์ฌ์ฃผ๋ ํ๋ ์ ์ฐจํธ๋ฅผ ํ์ํฉ๋๋ค.
2. ์ปค๋ฐ ํ (Commit Hooks)
์ปค๋ฐ ํ ์ ์ฌ์ฉํ๋ฉด ๊ฐ ์ปค๋ฐ ์ ํ์ ์ฌ์ฉ์ ์ง์ ์ฝ๋๋ฅผ ์คํํ ์ ์์ต๋๋ค. ์ด๋ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ๋ก๊น ํ๊ฑฐ๋ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์๋ณํ๋ ๋ฐ ๋์์ด ๋๋ ๋ค๋ฅธ ์์ ์ ์ํํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค.
์ปค๋ฐ ํ ์ ์ฌ์ฉํ๋ ค๋ฉด `react-devtools-timeline-profiler` ํจํค์ง๋ฅผ ์ค์นํด์ผ ํฉ๋๋ค. ํจํค์ง๋ฅผ ์ค์นํ ํ์๋ `useCommitHooks` ํ ์ ์ฌ์ฉํ์ฌ ์ปค๋ฐ ํ ์ ๋ฑ๋กํ ์ ์์ต๋๋ค. `useCommitHooks` ํ ์ `beforeCommit` ํจ์์ `afterCommit` ํจ์๋ผ๋ ๋ ๊ฐ์ ์ธ์๋ฅผ ๋ฐ์ต๋๋ค. `beforeCommit` ํจ์๋ ๊ฐ ์ปค๋ฐ ์ ์ ํธ์ถ๋๊ณ , `afterCommit` ํจ์๋ ๊ฐ ์ปค๋ฐ ํ์ ํธ์ถ๋ฉ๋๋ค.
3. ํ๋ก๋์ ๋น๋ ํ๋กํ์ผ๋ง (์ฃผ์ ํ์)
์ผ๋ฐ์ ์ผ๋ก ๊ฐ๋ฐ ๋น๋๋ฅผ ํ๋กํ์ผ๋งํ๋ ๊ฒ์ด ๊ถ์ฅ๋์ง๋ง, ํ๋ก๋์ ๋น๋๋ฅผ ํ๋กํ์ผ๋งํด์ผ ํ๋ ์ํฉ์ด ์์ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ํ๋ก๋์ ์์๋ง ๋ฐ์ํ๋ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์กฐ์ฌํ๊ณ ์ถ์ ์ ์์ต๋๋ค.
ํ๋ก๋์ ๋น๋๋ฅผ ํ๋กํ์ผ๋งํ๋ ๊ฒ์ ์๋นํ ์ค๋ฒํค๋๋ฅผ ์ ๋ฐํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ์ํฅ์ ์ค ์ ์์ผ๋ฏ๋ก ์ฃผ์ํด์ ์ํํด์ผ ํฉ๋๋ค. ์์ง๋๋ ๋ฐ์ดํฐ์ ์์ ์ต์ํํ๊ณ ์งง์ ์๊ฐ ๋์๋ง ํ๋กํ์ผ๋งํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
ํ๋ก๋์ ๋น๋๋ฅผ ํ๋กํ์ผ๋งํ๋ ค๋ฉด React ๊ฐ๋ฐ์ ๋๊ตฌ ์ค์ ์์ "production profiling" ์ต์ ์ ํ์ฑํํด์ผ ํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ํ๋กํ์ผ๋ฌ๊ฐ ํ๋ก๋์ ๋น๋์์ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์์งํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ํ๋ก๋์ ๋น๋์์ ์์ง๋ ๋ฐ์ดํฐ๋ ๊ฐ๋ฐ ๋น๋์์ ์์ง๋ ๋ฐ์ดํฐ๋งํผ ์ ํํ์ง ์์ ์ ์๋ค๋ ์ ์ ์ ์ํด์ผ ํฉ๋๋ค.
React ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
React ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ ๋ช ๊ฐ์ง ๋ชจ๋ฒ ์ฌ๋ก๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- React ๊ฐ๋ฐ์ ๋๊ตฌ ํ๋กํ์ผ๋ฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํฉ๋๋ค.
- ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ ํผํฉ๋๋ค.
- ๋น์ฉ์ด ๋ง์ด ๋๋ ๊ณ์ฐ์ ๋ฉ๋ชจ์ด์ฆํฉ๋๋ค.
- ํฐ ์ปดํฌ๋ํธ๋ฅผ ๋ ์์ ์ปดํฌ๋ํธ๋ก ๋ถํ ํฉ๋๋ค.
- ํฐ ๋ชฉ๋ก๊ณผ ํ ์ด๋ธ์๋ ๊ฐ์ํ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ๋ฅผ ์ต์ ํํฉ๋๋ค.
- ์ด๋ฏธ์ง์ ์์ฐ์ ์ต์ ํํฉ๋๋ค.
- ์ฝ๋ ๋ถํ ์ ์ฌ์ฉํ์ฌ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ์ค์ ๋๋ค.
- ํ๋ก๋์ ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํฉ๋๋ค.
๊ฒฐ๋ก
React ๊ฐ๋ฐ์ ๋๊ตฌ ํ๋กํ์ผ๋ฌ๋ React ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ๋ถ์ํ๊ณ ์ต์ ํํ๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค. ํ๋กํ์ผ๋ฌ ์ฌ์ฉ๋ฒ์ ์ดํดํ๊ณ ์ด ๊ฐ์ด๋์์ ๋ ผ์๋ ์ต์ ํ ๊ธฐ๋ฒ์ ์ ์ฉํจ์ผ๋ก์จ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉ์ ๊ฒฝํ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์ฑ๋ฅ ์ต์ ํ๋ ์ง์์ ์ธ ๊ณผ์ ์ด๋ผ๋ ๊ฒ์ ๊ธฐ์ตํ์ธ์. ์ ๊ธฐ์ ์ผ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ํ๋กํ์ผ๋งํ๊ณ ์ฑ๋ฅ์ ๊ฐ์ ํ ๊ธฐํ๋ฅผ ์ฐพ์ผ์ญ์์ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ์ง์์ ์ผ๋ก ์ต์ ํํจ์ผ๋ก์จ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ์ด ์ข์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.