React는 가상돔을 사용하는 구조이다.

현재 Render Tree와 가상돔에 있는 Render Tree의 차이점을 비교하는 것이 diffing 이며 렌더링 시점에서 차이점을 교체하게 된다.

안에 들어가는 모든 엘리먼트를 ReactDOM에서 관리하기 때문에 이것을 루트(root) DOM 혹은 루트 Node 라고 부른다

일반적으로 React로 구현된 애플리케이션은 하나의 루트 DOM이 있다.

단, 리액트를 기존 앱에 통합하려는 경우 원하는 만큼의 독립된 루트 DOM 노드를 가질 수 있음

Element-Update

리액트 엘리먼트는 불변객체(immutable)이다.

엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.

• 엘리먼트는 영화에서 하나의 프레임처럼 특정 시점의 UI를 나타냄

따라서 엘리먼트를 업데이트 하기 위해서는 완전히 새로운 엘리먼트를 만들고 다시 렌더링을 하는 방식을 사용함

const root = ReactDOM.createRoot(document.getElementById('root'));
      function tick() {
          const element = (
              <>
                  <h1>What time is it now?</h1>
                  <h3>It is {new Date().toLocaleTimeString()}</h3>
              </>
          );

          root.render(element);
      }
      setInterval(tick, 1000);

→ 해당 코드는 요소를 클릭 시, 1초 후 현재 시간을 알려주는 코드이다.

지금까지 미리 요소를 만든 후 루트 노드를 렌더링 시켰지만, 해당 함수에서는 이벤트를 실행할 때 마다 요소를 만들어서 루트 노드를 렌더링 하는 것이다.

• 함수를 통해 만들어진 엘리먼트는 Flagment 하위의 h1 노드와 h3 노드가 존재한다.

1. 물론 처음에는 root 노드는 아무것도 없으므로 가상돔에 생성된 h1노드와 h3 노드를 diffing 하여 렌더링을 할 것이다.
2. 클릭 이벤트를 발생시키므로서 새로운 엘리먼트를 생성하고 다시 diffing 작업을 통해 렌더링을 할 것이다.
   • 리액트 엘리먼트는 재사용 할 수 없으므로 새로 생성한다.