[React] 가상 DOM을 그릴 때(feat. diffing)

처음 가상 DOM을 그릴 때 실제 DOM 트리에 fragment를 제외하고 실제 DOM 트리에 Rendering 된다.(diffing을 통해)

두 번째 부터 update된 실제 DOM 트리와 비교해서 diffing을 통해 수정한다….

element를 업데이트 할 때 가상 dom을 매번 새로 그리지만 실제 dom tree와 비교해서 diffing을 한다(실제 dom tree를 바꾸는 것이 아님).

 

 

    리액트 엘리먼트는 불변객체(immutable)이다.
    엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.
    (엘리먼트는 영화에서 하나의 프레임처럼 특정 시점의 UI를 나타낸다.)

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