๐ŸŽ„ ์„ฑ์žฅ์ผ์ง€ 3.0

์ฑ… ํ–‰๋ณตํ•œ ์ด๊ธฐ์ฃผ์˜์ž(์›จ์ธ ๋‹ค์ด์–ด)์˜ ๋‚ด์šฉ์— ์ž๊ทน๋ฐ›์•„ ์‹œ์ž‘ํ•˜๋Š” ์†Œ๋ฐ•ํ•œ ์„ฑ์žฅ๊ธฐ๋ก

์‚ด์•„์žˆ๋Š” ๊ฝƒ๊ณผ ์ฃฝ์€ ๊ฝƒ์€ ์–ด๋–ป๊ฒŒ ๊ตฌ๋ณ„ํ•˜๋Š”๊ฐ€?
์„ฑ์žฅํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ด ์‚ด์•„ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค.
์ƒ๋ช…์˜ ์œ ์ผํ•œ ์ฆ๊ฑฐ๋Š” ์„ฑ์žฅ์ด๋‹ค!

๐ŸŒณ ํ‚ค์›Œ๋“œ (1.0)
์ตœ๋Œ€ํ•œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ •๋ฆฌ, ์ถ”ํ›„์— ๋ณด๋ฉด์„œ ์Šค์Šค๋กœ ์„ค๋ช…
๐Ÿ‰ ๊ฒฝํ—˜ ์œ„์ฃผ๋กœ (2.0)
๋‹จ์ˆœ ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•˜๊ธฐ๋ณด๋‹ค ๋ฌด์—‡์„ ๋ฐฐ์› ๊ณ  ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ–ˆ๋Š”์ง€ ์งง๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ์ž‘์„ฑ
โ„๏ธ ์ •ํ•ด์ง„ ํ…œํ”Œ๋ฆฟ์— ๋งž์ถฐ์„œ (3.0)
ํ‚ค์›Œ๋“œ, ๊ฒฝํ—˜ ๋ชจ๋‘ ์ข‹๋‹ค. ๋‹ค๋งŒ ๋งค์ผ ์ž‘์„ฑํ•˜๊ธฐ๋กœ ๋งˆ์Œ ๋จน์€๋งŒํผ ํ•ต์‹ฌ๋งŒ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์ •๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ…œํ”Œ๋ฆฟ์„ ์ž‘์„ฑ

๐Ÿ”‘ ์˜ค๋Š˜์˜ ํ‚ค์›Œ๋“œ

  • ๋ฆฌ์•กํŠธ
    • state๊ฐ€ ์ฐธ์กฐํ˜•(๋ฐฐ์—ด, ๊ฐ์ฒด ๋“ฑ)์ผ ์‹œ, ๋ถˆ๋ณ€์„ฑ ์œ ์ง€
    • ์ปดํฌ๋„ŒํŠธ ๋ฆฌ๋žœ๋”๋ง ์กฐ๊ฑด
      • state๊ฐ€ ๋ณ€ํ•˜๋Š” ๊ฒฝ์šฐ
      • props๊ฐ€ ๋ณ€ํ•˜๋Š” ๊ฒฝ์šฐ
      • ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ณ€ํ•˜๋Š” ๊ฒฝ์šฐ(์ฃผ๋กœ ์ด ๊ฒฝ์šฐ์— ์„ฑ๋Šฅ ์ €ํ•˜๊ฐ€ ๋ฐœ์ƒ)
    • ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ ๋ณ€๊ฒฝ์— ๋”ฐ๋ฅธ ์ž์‹ ์ปดํฌ๋„ŒํŠธ ๋ฆฌ๋žœ๋”๋ง ๋ง‰๊ธฐ
      • ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ: shouldComponentUpdate, PureComponent
      • ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ: React.memo
    • props๋Š” ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ณ€๊ฒฝํ•˜๋ฉด ์•ˆ๋œ๋‹ค. ๋ณ€๊ฒฝ์ด ํ•„์š”ํ•  ๋•, props๋ฅผ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์˜ state๋กœ ํ• ๋‹นํ•˜๊ณ  setState๋ฅผ ํ†ตํ•ด ๋ณ€๊ฒฝ

๐Ÿ“ ์š”์•ฝ ๋ฐ ํ•˜๋ฃจ ๊ฐ„๋‹จ ํšŒ๊ณ 

์ฃผ๋ง์ด๋ผ ๊ทธ๋Ÿฐ๊ฐ€ ์˜ค๋Š˜์€ ์กฐ๊ธˆ ๊ณต๋ถ€์–‘์ด ์ ์€ ๊ธฐ๋ถ„โ€ฆ ์ผ๋‹จ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋งŽ์ด ํ•™์Šตํ•˜์ง€ ๋ชปํ–ˆ๋‹น. ๋ฐ˜์„ฑํ•œ๋‹ค. ์ด๋ ‡๊ฒŒ ๊ณต๋ถ€ํ•˜๋Š” ๊ฒŒ ์žฌ๋ฏธ์žˆ์ง€๋งŒ, ์–ธ์ œ๋‚˜ ๋„๊ตฌ๋“ค์„ ์ตํžŒ๋‹ค๋Š” ๊ฒƒ์„ ๊ธฐ์–ตํ•˜์ž. ์–ด๋Š์ •๋„ ๊ฐ ์žก์•˜์œผ๋ฉด, ๊ทธ ๋„๊ตฌ๋ฅผ ์ง์ ‘ ์‚ฌ์šฉํ•ด๋ณด๋Š” ๊ฒŒ ๊ฐ€์žฅ ์ข‹์€ ๊ธธ์ด๋‹ค.
๊ธ์ •์ ์ธ ์—ฌ์œ ๋ฅผ ๊ฐ–์ž. ์‚ฌ๋žŒ๋“ค์ด ์Œ“์•„๋‘” ๊ธธ์„ ์ฐจ๊ทผ์ฐจ๊ทผ ๋ฐŸ์•„๊ฐ€๋ฉด์„œ ๊ฐœ๋ฐœ์ž๋กœ์„œ์˜ ๋‚˜๋ฅผ ์ •๋ฆฝํ•ด๋‚˜์•„๊ฐ€์ž.