React/Velopert's React

[React] Study #1 | React? React!

yevdev 2021. 9. 29. 21:33

๐Ÿ’ก์•„์ด๋””์–ด์˜ ์‹œ์ž‘

  • " ์–ด๋– ํ•œ ์ƒํƒœ๊ฐ€ ๋ฐ”๋€Œ์—ˆ์„ ๋•Œ, ๊ทธ ์ƒํƒœ์— ๋”ฐ๋ผ DOM์„ ์–ด๋–ป๊ฒŒ ์—…๋ฐ์ดํŠธ ํ•  ์ง€ ๊ทœ์น™์„ ์ •ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ์•„์˜ˆ ๋‹ค ๋‚ ๋ ค๋ฒ„๋ฆฌ๊ณ  ์ฒ˜์Œ๋ถ€ํ„ฐ ๋ชจ๋“ ๊ฑธ ์ƒˆ๋กœ ๋งŒ๋“ค์–ด์„œ ๋ณด์—ฌ์ค€๋‹ค๋ฉด ์–ด๋–จ๊นŒ? " ๋ผ๋Š” ์•„์ด๋””์–ด์—์„œ ์‹œ์ž‘!
  • ์•„์ด๋””์–ด์˜ ์žฅ์  : "์—…๋ฐ์ดํŠธ๋ฅผ ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ•  ์ง€"์— ๋Œ€ํ•œ ๊ณ ๋ฏผ์„ ์ „ํ˜€ ์•ˆํ•ด๋„ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ๋ฐœ์ด ์‰ฌ์›€
  • ์•„์ด๋””์–ด์˜ ๋‹จ์  : ๋ชจ๋“  ๊ฑธ ๋‹ค ๋‚ ๋ ค๋ฒ„๋ฆฌ๊ณ  ์ƒˆ๋กœ ๋งŒ๋“ ๋‹ค? ๋„ˆ๋ฌด ์˜ค๋ž˜๊ฑธ๋ ค!
  • ํ•˜์ง€๋งŒ, ์ด ๋‹จ์ ์€ Virtual DOM ์ด๋ผ๋Š” ๊ฒƒ์„ ์‚ฌ์šฉํ•ด์„œ ํ•ด๊ฒฐ!

Virtual DOM

  • ๋ง ๊ทธ๋Œ€๋กœ ๋ฉ”๋ชจ๋ฆฌ์— ์กด์žฌํ•˜๋Š” ๊ฐ€์ƒ์˜ DOM
  • ๊ทธ์ € Javascript ๊ฐ์ฒด! -> ์†๋„๊ฐ€ ๋น ๋ฆ„!
  • ์ƒํƒœ๊ฐ€ ์—…๋ฐ์ดํŠธ ๋˜๋ฉด, ์—…๋ฐ์ดํŠธ๊ฐ€ ํ•„์š”ํ•œ ๊ณณ์˜ UI๋ฅผ Virtual DOM์„ ํ†ตํ•ด์„œ ๋ Œ๋”๋ง
    • ์—…๋ฐ์ดํŠธ๋ฅผ ์–ด๋–ป๊ฒŒ ํ• ์ง€์— ๋Œ€ํ•œ ๊ณ ๋ฏผ ํ•ด๊ฒฐ + ๋น ๋ฅธ ์„ฑ๋Šฅ

 


Reference

https://react.vlpt.us/