The Virtual DOM

The Virtual DOM

One special thing about ReactDOM.render() is that it only updates DOM elements that have changed.

That means that if you render the exact same thing twice in a row, the second render will do nothing:

 

const hello = <h1>Hello world</h1>;

// This will add "Hello world" to the screen:

ReactDOM.render(hello, document.getElementById('app'));

// This won't do anything at all:

ReactDOM.render(hello, document.getElementById('app'));

 

This is significant! Only updating the necessary DOM elements is a large part of what makes React so successful.

React accomplishes this thanks to something called the virtual DOM. Before moving on to the end of the lesson, read this article about the Virtual DOM.

 

---

가상 돔

ReactDOM.render()에 대해 한가지 특별한 것은 이것이 오직 변화된 DOM태그들만 업데이트 한다는 것이다. 

이것은 즉, 두 번 연속해서 정확하게 같은 것을 렌더링하면 두 번째 렌더링은 아무 것도 하지 않는다는 뜻이다.

 

const hello = <h1>Hello world</h1>;

// This will add "Hello world" to the screen:

ReactDOM.render(hello, document.getElementById('app'));

// This won't do anything at all:

ReactDOM.render(hello, document.getElementById('app'));

 

이건 의미심장하다! 필요한 DOM 요소만 업데이트하는 것은 react를 성공적이게 만드는 큰 요소이다. 

리엑트는 가상돔이라고 불리우는 무언가 덕분에 이것을 완수한다. 

이 레슨을 끝내기 전에 이 가상돔 기사를 읽어봐라. read this article about the Virtual DOM.

 

 

https://www.codecademy.com/courses/react-101/lessons/react-jsx-intro/exercises/virtual-dom

| Codecademy