ν”Όλ“œλ‘œ λŒμ•„κ°€κΈ°
πŸš€ Day 1 of Learning React: Why React Exists, the Real DOM, Virtual DOM & React Elements
Dev.toDev.to
Frontend

Virtual DOM λ„μž…μ„ ν†΅ν•œ UI μƒνƒœ 동기화 μ΅œμ ν™” 및 λ Œλ”λ§ 효율 제고

πŸš€ Day 1 of Learning React: Why React Exists, the Real DOM, Virtual DOM & React Elements

Bismay.exe2026λ…„ 6μ›” 22일5λΆ„beginner

AI μš”μ•½

Context

직접적인 DOM μ‘°μž‘ 방식에 λ”°λ₯Έ λŒ€κ·œλͺ¨ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μƒνƒœ 관리 λ³΅μž‘λ„ 증가 및 μ„±λŠ₯ μ €ν•˜ λ°œμƒ. UI μ—…λ°μ΄νŠΈ μ‹œ λ°œμƒν•˜λŠ” Layout Recalculation 및 Repaint λΉ„μš©μœΌλ‘œ μΈν•œ λ Œλ”λ§ 병λͺ© ν˜„μƒ 심화.

Technical Solution

  • UI = Function(State) λͺ¨λΈ λ„μž…μ„ ν†΅ν•œ 선언적 UI μ •μ˜ 체계 ꡬ좕
  • JavaScript λ©”λͺ¨λ¦¬ 상에 Real DOM의 κ²½λŸ‰ 볡제본인 Virtual DOM ꡬ쑰 섀계
  • React ElementλΌλŠ” λ‹¨μˆœ 객체 ν˜•νƒœμ˜ UI κΈ°μˆ μ„œ(Description) 생성
  • 가상 트리 κ°„μ˜ 차이점 뢄석(Diffing)을 톡해 λ³€κ²½ μ‚¬ν•­λ§Œ μΆ”μΆœ
  • μ΅œμ†Œν•œμ˜ Real DOM μ—…λ°μ΄νŠΈλ₯Ό μˆ˜ν–‰ν•˜λŠ” 효율적 λ Œλ”λ§ νŒŒμ΄ν”„λΌμΈ κ΅¬ν˜„
  • React Element β†’ Virtual DOM β†’ Real DOM으둜 μ΄μ–΄μ§€λŠ” 단방ν–₯ 데이터 흐름 μ œμ–΄

μ‹€μ²œ 포인트

- λ³΅μž‘ν•œ μƒνƒœ λ³€κ²½ μ‹œ 직접적인 DOM μ‘°μž‘ λŒ€μ‹  μƒνƒœ 기반의 선언적 λ Œλ”λ§ ꡬ쑰 κ²€ν†  - λΉˆλ²ˆν•œ UI μ—…λ°μ΄νŠΈκ°€ ν•„μš”ν•œ μ˜μ—­μ—μ„œ Virtual DOM의 Diffing λΉ„μš©κ³Ό Real DOM의 Repaint λΉ„μš© κ°„μ˜ Trade-off 뢄석 - UI ꡬ성 μš”μ†Œλ₯Ό λ‹¨μˆœ 객체(Plain Object)둜 μΆ”μƒν™”ν•˜μ—¬ λ©”λͺ¨λ¦¬ μƒμ—μ„œ λ¨Όμ € μ²˜λ¦¬ν•˜λŠ” μ „λž΅ 적용

νƒœκ·Έ

#Rendering Pipeline#React Element#Virtual DOM#Real DOM#Declarative UI
원문 읽기