React: The Virtual DOM

The Problem

DOM manipulation is the heart of the modern, interactive web. Unfortunately, it is also a lot slower than most JavaScript operations.

This slowness is made worse by the fact that most JavaScript frameworks update the DOM much more than they have to.

As an example, let’s say that you have a list that contains ten items. You check off the first item. Most JavaScript frameworks would rebuild the entire list. That’s ten times more work than necessary! Only one item changed, but the remaining nine get rebuilt exactly how they were before.

Rebuilding a list is no big deal to a web browser, but modern websites can use huge amounts of DOM manipulation. Inefficient updating has become a serious problem.

To address this problem, the people at React popularized something called the virtual DOM.

 

---

문제

DOM manipulation 돔 조작은 현대, 인터렉티브한(상호작용을하는) 웹의 심장이다. 

불행하게도, 이것은 대부분의 JS동작보다 많이 느리다. 

대부분의 자바스크립트 프레임워크가 DOM을 필요한 것보다 훨씬 더 많이 업데이트한다는 사실 때문에 이러한 느림은 더욱 악화된다.

한 예로, 10개 아이템들을 포함하는 한 리스트를 당신이 가지고 있다고 해보자.

당신은 첫번째 아이템을 체크한다. 

대부분의 JS 프레임워크들은 전체 리스트를 재생성할 것이다. 

이것은 필요보다 10배는 더 일하는 것이다! 

한 항목만 바뀌었을 뿐 나머지 9개 항목은 이전과 똑같이 재건된다.

리스트 재생성은 웹브라우저에게 큰 거래는 아니다. 그러나 현대웹사이트들은 커다란 양의 DOM조작을 사용할 수 있다.

비효율적인 업데이팅은 심각한 문제가 될 수 있다. 

React에 있는 사람들은 가상 DOM이라고 불리는 것을 대중화했다.

 

---

The Virtual DOM

In React, for every DOM object, there is a corresponding “virtual DOM object.”

A virtual DOM object is a representation of a DOM object, like a lightweight copy.

A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.

 

 

---

가상돔

리엑트에서, 모든 DOM 객체에 해당하는 "가상 DOM 객체"가 있다.

가상 DOM 객체는 경량 복사본과 같이 DOM 객체를 표현한 것이다.

가상 DOM 객체는 실제 DOM객체로써 같은 속성을 가진다.

그러나 실제 DOM객체는 실제 화면에 있는 것을 직접적으로 바꾸기 위한 힘이 부족하다. 

돔 조작은 느리다. 

가상 DOM을 조작하는 것이 훨씬 더 빠르다. 화면에 아무것도 그려지지 않기 때문이다.

가상 DOM을 실제 주택에서 방을 옮기는 것과 달리 청사진 편집으로써 생각해보아라. 

---

How it helps

When you render a JSX element, every single virtual DOM object gets updated.

This sounds incredibly inefficient, but the cost is insignificant because the virtual DOM can update so quickly.

Once the virtual DOM has updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update.

By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called “diffing.”

Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM.

 

In our example from earlier, React would be smart enough to rebuild your one checked-off list-item, and leave the rest of your list alone.

This makes a big difference! React can update only the necessary parts of the DOM.

React’s reputation for performance comes largely from this innovation.

In summary, here’s what happens when you try to update the DOM in React:

1. The entire virtual DOM gets updated.
2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
3. The changed objects, and the changed objects only, get updated on the real DOM.
4. Changes on the real DOM cause the screen to change.

If you’d like to learn more about the virtual DOM, here’s a good place to start.

 

---

도움이 되는 방법

당신이 JSX태그를 렌더할 때, 모든 단일 가상돔객체들은 업데이트된다. 

이것은 믿기지 않을만큼 비효율적으로 들리지만, 가상 DOM이 정말 빨리 업데이트할 수 있기 때문에 비용은 미미하다.

일단 가상DOM이 업데이트되면, 리엑트는 가상 DOM을 업데이트 직전에 생성된 가상 DOM 스냅샷과 비교한다.

 

새로운 가상돔과 업데이트 전 버전과 비교함으로써 리엑트는 어떤 가상돔 객체가 변화되었는지 정확하게 밝혀낸다.

이 과정을 'diffing'이라고 부른다. 

 

일단, 리엑트가 어떤 가상 돔 객체가 변화되었는지 알면, 그리고나서 리엑트는 실제돔에서 오직 해당객체들만 업데이트한다. 

앞의 예에서, React는 체크아웃된 목록 항목 하나만을 다시 작성하고

나머지 목록은 그대로 둘 수 있을 만큼 충분히 현명할 것이다. 🤗

 

이것은 매우 큰 차이를 만든다! 리엑트는 DOM의 필요한 부분만 업데이트 할 수 있다. 

리액션의 성과에 대한 평판은 크게 이 혁신에서 비롯된다.

 

 

 

요약하자면, 여기 당신이 REACT에서 DOM을 업데이트하려고 할 때 일어나는 것들이다.

 

   1. 전체 가상 DOM이 업데이트된다.

   2. 이 가상돔은 당신이 이것을 업데이트하기 전의 것과 비교된다. 

      react 는 바뀐 객체들을 밝혀낸다. 

   3. 변화된 객체들(오직 변화된 객체들만)은 실제 DOM에 업데이트된다.

   4. 실제 DOM 변화는 화면이 바뀌도록 한다.  

 

 

https://www.codecademy.com/articles/react-virtual-dom

React: The Virtual DOM | Codecademy