ν”„λ‘œκ·Έλž˜λ°/React JS

[React] 가상 돔(Virtual DOM)이 무엇이고 μ™œ μ€‘μš”ν• κΉŒμš”?

μš©λ‡½ 2023. 11. 21. 22:47
λ°˜μ‘ν˜•

 

https://www.syncfusion.com/blogs/post/react-virtual-dom.aspx

πŸ“– λ“€μ–΄κ°€λ©°

λ¦¬μ•‘νŠΈκ°€ λ›°μ–΄λ‚œ μ„±λŠ₯을 보여쀄 수 μžˆλŠ” λΉ„κ²° 쀑 ν•˜λ‚˜λŠ” λ°”λ‘œ 가상 돔(Virtual DOM)μž…λ‹ˆλ‹€.

μ΄λŠ” λ¦¬μ•‘νŠΈμ˜ 핡심 κ°œλ… 쀑 ν•˜λ‚˜λ‘œ 가상 돔에 λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€.

DOM(Document Object Model)

μ›Ή μ‚¬μ΄νŠΈμ— μ ‘μ†ν•˜λ©΄ λ³΄μ΄λŠ” κ°κ°μ˜ μš”μ†Œ(Element)듀이 λͺ¨μ—¬ ν•˜λ‚˜μ˜ λ¬Έμ„œ(Document)λ₯Ό κ΅¬μ„±ν•©λ‹ˆλ‹€.

μ΄λŸ¬ν•œ λ¬Έμ„œμ˜ κ΅¬μ‘°λ₯Ό ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄κ°€ μ΄ν•΄ν•  μˆ˜ μžˆλ„둝 ν‘œν˜„ν•œ κ²ƒμ΄ λ°”λ‘œ DOMμž…λ‹ˆλ‹€.

https://www.javatpoint.com/what-is-dom-in-react

DOM은 μš”μ†Œλ“€μ„ 트리(Tree) ν˜•νƒœλ‘œ ν‘œν˜„ν•˜λ©°, 각 μš”μ†Œμ— ν•΄λ‹Ήν•˜λŠ” λ…Έλ“œ(Node)κ°€ μ‘΄μž¬ν•©λ‹ˆλ‹€.

κ°œλ°œμžλ“€μ€ DOM이 μ œκ³΅ν•˜λŠ” APIλ₯Ό μ΄μš©ν•΄ μ΄λŸ¬ν•œ DOM ꡬ쑰에 μ ‘κ·Όν•˜κ³ , λ‚΄μš©μ΄λ‚˜ μŠ€νƒ€μΌμ„ λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

이런 과정을 DOM μ‘°μž‘μ΄λΌκ³  λΆ€λ¦…λ‹ˆλ‹€.

ν•˜μ§€λ§Œ 예λ₯Ό λ“€μ–΄, μ›Ή νŽ˜μ΄μ§€μ˜ νŠΉμ • μš”μ†Œμ˜ 색상을 λ³€κ²½ν•˜λ €λ©΄, ν•΄λ‹Ή μš”μ†Œλ₯Ό μ°Ύκ³  색상을 λ³€κ²½ν•œ ν›„, κ·Έ λ³€κ²½ 사항을 μ μš©ν•˜κΈ° μœ„ν•΄ ν•΄λ‹Ή μš”μ†ŒλΆ€ν„° ν•˜μœ„ μš”μ†ŒκΉŒμ§€ λΈŒλΌμš°μ €κ°€ 화면을 λ‹€μ‹œ κ·Έλ¦¬λŠ”λ° κ°€μž₯ λ§Žμ€ λΉ„μš©μ΄ λ°œμƒν•©λ‹ˆλ‹€.

즉, λ¦¬ν”Œλ‘œμš°(Reflow) 및 리페인트(Repaint)에 λŒ€ν•œ λΉ„μš©μ΄ 많이 λ°œμƒν•˜κ²Œ λ©λ‹ˆλ‹€.


λ¦¬ν”Œλ‘œμš°(Reflow): DOM의 κ΅¬μ‘°λ‚˜ λ ˆμ΄μ•„μ›ƒμ΄ λ³€κ²½λ˜λ©΄ λΈŒλΌμš°μ €λŠ” μƒˆλ‘œμš΄ λ ˆμ΄μ•„μ›ƒμ„ κ³„μ‚°ν•˜κ³  화면을 λ‹€μ‹œ κ·Έλ¦½λ‹ˆλ‹€. 이λ₯Ό λ¦¬ν”Œλ‘œμš°λΌκ³  ν•©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, μš”μ†Œμ˜ ν¬κΈ°λ‚˜ μœ„μΉ˜λ₯Ό λ³€κ²½ν•˜λ©΄ λ¦¬ν”Œλ‘œμš°κ°€ λ°œμƒν•©λ‹ˆλ‹€.

리페인트(Repaint): μš”μ†Œμ˜ μƒ‰μƒμ΄λ‚˜ ν…Œλ‘λ¦¬ λ“± 외양이 λ³€κ²½λ˜λ©΄, λΈŒλΌμš°μ €λŠ” ν•΄λ‹Ή μš”μ†Œλ₯Ό λ‹€μ‹œ κ·Έλ¦½λ‹ˆλ‹€. 이λ₯Ό 리페인트라고 ν•©λ‹ˆλ‹€.

DOM Fragment

DOM Fragment와가상돔(Virtual DOM)은 λͺ¨λ‘ λ¦¬ν”Œλ‘œμš°μ™€ 리페인트λ₯Ό μ΅œμ†Œν™”μ‹œμΌœμ„œ μ„±λŠ₯을 ν–₯μƒμ‹œν‚€λŠ” λͺ©ν‘œλŠ” 같은데 가상 돔이 DOM Fragmentλ₯Ό 더 λ°œμ „μ‹œν‚¨ κ°œλ…μ΄λΌκ³  λ³Ό 수 있고, 가상돔은 μΆ”μƒν™”λœ 볡사본을 λ©”λͺ¨λ¦¬μ— μœ μ§€ν•˜κ³  이λ₯Ό ν†΅ν•΄μ„œ 변경사항을 μ μš©μ‹œν‚¨λ‹€λŠ” 차이가 μžˆμŠ΅λ‹ˆλ‹€.
DOM FragmentλŠ” createDocumentFragment() λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•΄μ„œ DOM Fragmen의 μ—¬λŸ¬ 개의 μžμ‹ λ…Έλ“œλ‘œ μΆ”κ°€ν•˜κ³  μ΄λ ‡κ²Œ μΆ”κ°€λœ DOM Fragmentλ₯Ό μ‹€μ œ 돔에 μΆ”κ°€ν•©λ‹ˆλ‹€.

가상돔(Virtual DOM)

μœ„μ—μ„œ λ§ν•œ λ¬Έμ œλ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄μ„œ ReactλŠ” 가상 돔(Virtual)μ΄λΌλŠ” κ°œλ…μ„ λ„μž…ν–ˆμŠ΅λ‹ˆλ‹€.

ReactλŠ” λ Œλ”λ§μ΄ λ°œμƒλ  상황에 λ†“μ΄κ²Œ 되면 μƒˆλ‘œμš΄ 화면에 λ“€μ–΄κ°ˆ λ‚΄μš©μ΄ λ‹΄κΈ΄ 가상 돔을 μƒμ„±ν•˜κ²Œ λ©λ‹ˆλ‹€.

가상 돔은 μ‹€μ œ DOM의 κ°€λ²Όμš΄ λ³΅μ‚¬λ³ΈμœΌλ‘œ λ©”λͺ¨λ¦¬ 상에 μ‘΄μž¬ν•˜λ©°, JavaScript 객체 ν˜•νƒœλ‘œ μ‘΄μž¬ν•©λ‹ˆλ‹€.

λ¦¬μ•‘νŠΈλŠ” 항상 λ Œλ”λ§ μ΄μ „μ˜ ν™”λ©΄ ꡬ쑰와 λ Œλ”λ§ μ΄ν›„μ˜ ν™”λ©΄ ꡬ쑰λ₯Ό 가진 두 개의 가상 돔 객체λ₯Ό μœ μ§€ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

이 두 가상 돔을 λΉ„κ΅ν•˜μ—¬ λ³€κ²½λœ λΆ€λΆ„λ§Œ μ‹€μ œ DOM에 λ°˜μ˜ν•©λ‹ˆλ‹€.

가상돔(Virtual DOM) λ™μž‘ 원리

https://www.javatpoint.com/what-is-dom-in-react

가상 λ”μ˜ λΉ„ꡐ κ³Όμ •μ—μ„œλŠ” diffing μ•Œκ³ λ¦¬μ¦˜μ΄ μ‚¬μš©λ©λ‹ˆλ‹€.이 μ•Œκ³ λ¦¬μ¦˜μ€ 두 가상 돔 트리λ₯Ό 효율적으둜 λΉ„κ΅ν•˜μ—¬ μ–΄λ–€ μš”μ†Œκ°€ λ³€κ²½λ˜μ—ˆλŠ”μ§€λ₯Ό μ •ν™•νžˆ νŒŒμ•…ν•©λ‹ˆλ‹€.

 

diffing μ•Œκ³ λ¦¬μ¦˜ λ™μž‘ 방식

  • 이전 가상돔 νŠΈλ¦¬μ™€ μƒˆλ‘œμš΄ 가상돔 트리λ₯Ό λΉ„κ΅ν•˜κ³  루트 λ…Έλ“œμ—μ„œ μ‹œμž‘ν•΄μ„œ 이전과 μƒˆλ‘œμš΄ λ…Έλ“œλ₯Ό λΉ„κ΅ν•©λ‹ˆλ‹€.
  • 두 λ…Έλ“œκ°€ λ‹€λ₯Έ μœ ν˜•μ΄λ©΄ μƒˆ λ…Έλ“œλ₯Ό μƒμ„±ν•˜μ—¬ κΈ°μ‘΄ λ…Έλ“œλ₯Ό λŒ€μ²΄ν•©λ‹ˆλ‹€.
  • 근데 두 λ…Έλ“œκ°€ 같은 μœ ν˜•μ΄λ©΄ 속성을 λΉ„κ΅ν•΄μ„œ λ³€κ²½λœ 것이 μžˆλŠ”μ§€ ν™•μΈν•˜κ³  λ³€κ²½λœ 속성이 μ—†μœΌλ©΄ κ·ΈλŒ€λ‘œ μ‚¬μš©ν•˜κ³  있으면 속성을 μ—…λ°μ΄νŠΈν•©λ‹ˆλ‹€.
  • μ΄λ ‡κ²Œ ν•΄μ„œ μžμ‹λ…Έλ“œλ₯Ό μž¬κ·€μ μœΌλ‘œ λΉ„κ΅ν•©λ‹ˆλ‹€.

이 과정을 'μž¬μ‘°μ •(reconciliation)'이라고 λΆ€λ¦…λ‹ˆλ‹€.

μž¬μ‘°μ •μ„ ν†΅ν•΄ λ³€κ²½ μ‚¬ν•­μ΄ νŒŒμ•…λ˜λ©΄, ν•΄λ‹Ή λ³€κ²½ μ‚¬ν•­λ§Œ μ‹€μ œ DOM에 λ°˜μ˜ν•˜μ—¬ μ—…λ°μ΄νŠΈν•©λ‹ˆλ‹€.

이런 λ°©μ‹μœΌλ‘œ 전체 DOM 트리λ₯Ό 재 κ΅¬μΆ•ν•˜μ§€ μ•Šκ³ , ν•„μš”ν•œ λΆ€λΆ„λ§Œ λΉ λ₯΄κ²Œ μ—…λ°μ΄νŠΈν•  수 μžˆμŠ΅λ‹ˆλ‹€.

더 λ‚˜μ•„κ°€, λ¦¬μ•‘νŠΈλŠ” μ—¬λŸ¬ μƒνƒœ μ—…λ°μ΄νŠΈλ₯Ό ν•œ λ²ˆμ— μˆ˜ν–‰ν•˜λŠ” Batch Update λ©”μ»€λ‹ˆμ¦˜μ„ 톡해 λ”μš± 효율적인 λ Œλ”λ§μ„ κ°€λŠ₯ν•˜κ²Œ ν•©λ‹ˆλ‹€

μ΄λ ‡κ²Œ κ°€μƒ λ”은 μ‹€μ œ DOM을 μ§μ ‘ μ‘°μž‘ν•˜λŠ” λŒ€μ‹  κ°„μ ‘μ μœΌλ‘œ μ‘°μž‘ν•˜λ©΄μ„œ λ Œλ”링 μ„±λŠ₯을 ν–₯μƒμ‹œν‚€λŠ” μ—­ν• μ„ ν•©λ‹ˆλ‹€.

 

μ°Έκ³  λ¬Έν—Œ:

λ°˜μ‘ν˜•