가상 DOM

🧐 가상 DOM?

💡 Virtual DOM은 React가 빠르게 UI를 업데이트하기 위해 사용하는 개념

❗ 가상 DOM은 실제 DOM을 추상화한 경량화된 자바스크립트 객체

❗ UI를 빠르게 업데이트하고, 브라우저의 성능을 최적화

❗ React는 가상 DOM을 사용하여 변경된 부분만 효율적으로 업데이트

❗ React, Vue.js에서 사용

❗ 하지만 React에서 "공식적으로는" 가상DOM이라는 단어를 사용하지 않음 (많은 이유가 있지만 react는 웹개발 외에도 react native 등 DOM 조작이 아니더라도 다양한 기능을 제공하기 때문)

⚙️ 가상 DOM의 동작 방식

1. 가상 DOM 생성

   컴포넌트가 렌더링되면, React는 해당 컴포넌트의 가상 DOM을 생성

   (가상 DOM은 실제 DOM과 동일한 구조를 갖지만, 메모리 상에서만 존재하는 객체)

2. 변경 사항 비교 (diffing)

   상태가 변경되면 React는 새로운 가상 DOM을 생성하여 이전 가상 DOM과 비교 (="diffing")

3. 변경된 부분만 실제 DOM에 반영 (reconciliation)

   변경된 부분만을 실제 DOM에 업데이트

   이 과정을 reconciliation이라고 부르며, 이를 통해 브라우저의 부담을 줄이고 성능을 높여줌

const [text, setText] = useState("안녕");

function updateText() {
  setText("하세요");
}

return (
  <div>
    <p>{text}</p>
    <button onClick={updateText}>버튼</button>
  </div>
);

위 코드에서 버튼을 클릭하면 setText가 호출되어 상태가 변경

React는 가상 DOM을 업데이트하고, 변경된 부분(텍스트)만 실제 DOM에 반영하여 성능을 최적화

🔨 가상 DOM의 장점

1. 빠른 렌더링

   React는 가상 DOM을 사용해 UI의 변경을 효율적으로 처리

   가상 DOM을 이용해 변경 사항을 메모리 상에서 계산한 후, 실제 DOM에 필요한 최소한의 변경만 수행하므로 성능 향상

2. 최소한의 업데이트

   변경된 부분만 실제 DOM에 반영하므로, 불필요한 DOM 조작이 최소화

   특히 DOM 조작이 성능에 큰 영향을 미치는 복잡한 애플리케이션에서 효과적

3. 메모리 낭비 최소화

---

참고

https://doqtqu.tistory.com/316
https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/#_2-jsx