[참고]

https://dev-yakuza.posstree.com/ko/react/create-react-app/react/#가상-돔

아래 내용은 윗 게시물을 참고해 적은 것으로, 내용이 없는 부분은 윗 게시물을 읽는 것을 추천드립니다.

[리액트란]

[리액트의 특징]

[가상 돔] : 리액트, Vue js

웹 브라우저가 네트워크를 통해 HTML을 전달 받으면 브라우저의 렌더링 엔진은 HTML을 파싱하고 돔 노드(DOM Node)로 이루어진 트리를 만듭니다. 또한 CSS 파일과 HTML의 요소들(Element)의 인라인 스타일을 파싱하여 스타일 정보를 가진 스타일 트리도 생성합니다.

HTML & CSS 렌더링 과정

이렇게 렌더 트리가 완성되면 브라우저는 Attachment라는 과정을 통해 스타일 정보를 계산합니다. 렌더 트리로 생성된 모든 노드들은 attach라는 함수를 가지고 있는데, 이 Attachment라는 과정에서 이 메소드들이 호출되게 되며, 해당 메소드는 스타일 정보를 계산하고 결과값을 객체 형태로 반환하게 됩니다.

⇒ 렌더 트리로 생성된 모든 노드들은 attach라는 함수를 가지고 있는데 이를 통해 스타일정보를 계산하는 attachment 과정을 거친다.

응답이 돌아와야 다음 동작을 수행함.

이때 이 계산 과정은 모두 동기적(Synchronous)으로 동작하게 되며, 만약 렌더 트리에 새로운 노드가 추가된다면 해당 노드의 attach 메소드가 실행되어 계산 과정을 거치게 됩니다.