๋ณธ๋ฌธ์œผ๋กœ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์ •ํ™•ํ•˜์ง€ ์•Š๋‹ค!!

TIL ๋ธ”๋กœ๊ทธ๋“ค์ด ๋งŽ์ด ์ƒ๊ฒจ๋‚˜๋ฉด์„œ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ์ 

react rendering๊ณผ์ •์„ ๊ตฌ๊ธ€๋งํ•˜๋‹ค 10์—ฌ๊ฐœ์˜ ๋ธ”๋กœ๊ทธ ๊ธ€์„ ์•„๋ฌด๋ฆฌ ์ฝ์–ด๋ด๋„, ๋‹น์ทŒ ์ดํ•ด๊ฐ€ ์•ˆ๋๋‹ค.
ํ•œ๊ตญ์–ด๋Š” ๋งž๋Š”๋ฐ ๋ญ”๊ฐ€ ์ด์ƒํ•˜๋‹ค. ๊ฐ‘์ž๊ธฐ ๋‚˜์˜ ๊ฐœ๋ฐœ ์‹ค๋ ฅ์— ์˜์‹ฌ์„ ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.
์ด๋ž˜์„œ ๋„ˆ๋ฌด ๊ณผํ•œ ๋‚ดํ–ฅ์„ฑ(๋ฌธ์ œ์˜ ์›์ธ์„ ์ž๊ธฐ ํƒ“์œผ๋กœ ๋Œ๋ฆผ)์€ ๋ฌธ์ œ๊ฐ€ ๋˜๋Š” ๋“ฏํ•˜๋‹ค.

์˜๋ฌธ์œผ๋กœ ์ณ์„œ ๊ฒ€์ƒ‰ํ•ด๋ณด์•˜๋‹ค.
์ด๋Ÿฐ? ๋‚ด๊ฐ€ ์˜์•„ํ•˜๊ฒŒ ์ƒ๊ฐํ•œ ๊ฒƒ๋“ค์ด ์˜๋ฌธ์œผ๋กœ ๊ฒ€์ƒ‰ํ•˜๋‹ˆ, ์ •ํ™•ํžˆ ๊ฐ€๋ ค์šด ๋ถ€๋ถ„์„ ๋…ผ๋ฆฌ์ ์œผ๋กœ ์„ค๋ช…ํ•˜๊ณ  ์žˆ์—ˆ๊ณ , ๋‚ด๊ฐ€ ํ‹€๋ฆฐ๋ถ€๋ถ„์ด๋ผ ์ˆ˜์ •ํ•œ ๋ถ€๋ถ„๋„ ์ •ํ™•ํžˆ ๋‚˜์™”๋‹ค.

๋‚ด๊ฐ€ ์‹ฌ๋ฆฌํ•™์„ ๊ณต๋ถ€ํ•  ๋•Œ ์ ์šฉํ–ˆ๋˜ process๋ฅผ ์ƒ๊ฐํ•ด์„œ ๊ฐœ๋ฐœ ๊ณต๋ถ€๋ฅผ ํ•˜๋ฉด์„œ๋„ ์ ์šฉํ•˜์ž.
3์ฐจ, 4์ฐจ ๊ฐ€๊ณต์˜ ์ปจํ…์ธ ๋Š” ๊ฐ€๋…์„ฑ๊ณผ ์žฌ๋ฏธ๊ฐ€ ์žˆ์–ด์•ผ ๊ฐ€์น˜๊ฐ€ ์žˆ๋‹ค.
๊ฐ€๋…์„ฑ๊ณผ ์žฌ๋ฏธ๋„ ์—†๋Š” 3,4์ฐจ ์ปจํ…์ธ ๋ฅผ ๋จธ๋ฆฌ ์‹ธ๋งค๊ณ  ์ฝ์„ ๊ฐ€์น˜๊ฐ€ ์ „ํ˜€ ์—†๋‹ค.

๊ฐ€๋…์„ฑ๊ณผ ์žฌ๋ฏธ๊ฐ€ ๋–จ์–ด์ง€๋”๋ผ๋„ ์ •ํ™•ํ•œ ์ •๋ณด์˜ original source๋ฅผ ์ ‘ํ•˜๋ฉด ํ›จ์”ฌ ๋น ๋ฅด๊ฒŒ ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋‹ค. ์ • ์•„๋‹ˆ๋ฉด ํ•œ๊ตญ ์„œ์ ์„ ์‚ฌ์„œ, ๊ฐ€๋…์„ฑ, ์žฌ๋ฏธ, ์ •๋ณด์˜ opitimal point๋ฅผ ์ฐพ์ž.



๊ฐ€๋…์„ฑ๊ณผ ์žฌ๋ฏธ ์ •๋ณด๊นŒ์ง€ ๋ชจ๋‘ ์ฑ™๊ธด 3,4์ฐจ ์ปจํ…์ธ ์˜ ์•„์ฃผ ์ข‹์€ ์˜ˆ์‹œ๋ฅผ ๋งํฌํ•ด๋‘”๋‹ค.
https://felixgerschau.com/react-rerender-components/

 

When does React re-render components?

React re-rendering explained and how to optimize React's re-render performance

felixgerschau.com

 

๋ฐ˜์‘ํ˜•