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/