[React] κ°μ λ(Virtual DOM)μ΄ λ¬΄μμ΄κ³ μ μ€μν κΉμ?
π λ€μ΄κ°λ©°
리μ‘νΈκ° λ°μ΄λ μ±λ₯μ 보μ¬μ€ μ μλ λΉκ²° μ€ νλλ λ°λ‘ κ°μ λ(Virtual DOM)μ λλ€.
μ΄λ 리μ‘νΈμ ν΅μ¬ κ°λ μ€ νλλ‘ κ°μ λμ λν΄ μμλ³΄κ² μ΅λλ€.
DOM(Document Object Model)
μΉ μ¬μ΄νΈμ μ μνλ©΄ 보μ΄λ κ°κ°μ μμ(Element)λ€μ΄ λͺ¨μ¬ νλμ λ¬Έμ(Document)λ₯Ό ꡬμ±ν©λλ€.
μ΄λ¬ν λ¬Έμμ ꡬ쑰λ₯Ό νλ‘κ·Έλλ° μΈμ΄κ° μ΄ν΄ν μ μλλ‘ ννν κ²μ΄ λ°λ‘ DOMμ λλ€.
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) λμ μ리
κ°μ λμ λΉκ΅ κ³Όμ μμλ diffing μκ³ λ¦¬μ¦μ΄ μ¬μ©λ©λλ€.μ΄ μκ³ λ¦¬μ¦μ λ κ°μ λ νΈλ¦¬λ₯Ό ν¨μ¨μ μΌλ‘ λΉκ΅νμ¬ μ΄λ€ μμκ° λ³κ²½λμλμ§λ₯Ό μ νν νμ ν©λλ€.
diffing μκ³ λ¦¬μ¦ λμ λ°©μ
- μ΄μ κ°μλ νΈλ¦¬μ μλ‘μ΄ κ°μλ νΈλ¦¬λ₯Ό λΉκ΅νκ³ λ£¨νΈ λ Έλμμ μμν΄μ μ΄μ κ³Ό μλ‘μ΄ λ Έλλ₯Ό λΉκ΅ν©λλ€.
- λ λ Έλκ° λ€λ₯Έ μ νμ΄λ©΄ μ λ Έλλ₯Ό μμ±νμ¬ κΈ°μ‘΄ λ Έλλ₯Ό λ체ν©λλ€.
- κ·Όλ° λ λ Έλκ° κ°μ μ νμ΄λ©΄ μμ±μ λΉκ΅ν΄μ λ³κ²½λ κ²μ΄ μλμ§ νμΈνκ³ λ³κ²½λ μμ±μ΄ μμΌλ©΄ κ·Έλλ‘ μ¬μ©νκ³ μμΌλ©΄ μμ±μ μ λ°μ΄νΈν©λλ€.
- μ΄λ κ² ν΄μ μμλ Έλλ₯Ό μ¬κ·μ μΌλ‘ λΉκ΅ν©λλ€.
μ΄ κ³Όμ μ 'μ¬μ‘°μ (reconciliation)'μ΄λΌκ³ λΆλ¦
λλ€.
μ¬μ‘°μ μ ν΅ν΄ λ³κ²½ μ¬νμ΄ νμ
λλ©΄, ν΄λΉ λ³κ²½ μ¬νλ§ μ€μ DOMμ λ°μνμ¬ μ
λ°μ΄νΈν©λλ€.
μ΄λ° λ°©μμΌλ‘ μ 체 DOM νΈλ¦¬λ₯Ό μ¬ κ΅¬μΆνμ§ μκ³ , νμν λΆλΆλ§ λΉ λ₯΄κ² μ λ°μ΄νΈν μ μμ΅λλ€.
λ λμκ°, 리μ‘νΈλ μ¬λ¬ μν μ
λ°μ΄νΈλ₯Ό ν λ²μ μννλ Batch Update λ©μ»€λμ¦μ ν΅ν΄ λμ± ν¨μ¨μ μΈ λ λλ§μ κ°λ₯νκ² ν©λλ€
μ΄λ κ² κ°μ λμ μ€μ DOMμ μ§μ μ‘°μνλ λμ κ°μ μ μΌλ‘ μ‘°μνλ©΄μ λ λλ§ μ±λ₯μ ν₯μμν€λ μν μ ν©λλ€.
μ°Έκ³ λ¬Έν: