리액트와 Virtual DOM
JiwonDev
브라우저의 Workflow 1. DOM Tree 생성 브라우저가 HTML을 받으면 해당 코드를 파싱하여 문서객체트리(DOM Tree)를 만듭니다. 2. Render Tree 생성 만들어진 DOM Tree 와 CSS의 스타일 정보를 이용해 렌더 트리를 생성합니다. 3. Layout (=Reflow) 만들어진 렌더트리를 이용하여 각 노드들의 절대 값 좌표가 주어지고, 정확하게 어디에 나타나야 할 지 정합니다. 4. Painting (=Repainting) Layout 과정까지 마쳤다면 트리의 각 노드들을 필요할 때 화면에 그립니다. React의 Virtual DOM 기존의 웹 브라우저에서는 DOM을 조작하면 렌더 트리를 다시 만들고, Layout 과정을 거쳐 페인팅을 하게됩니다. 옛날의 웹페이지는 단순히 H..