목록DOM (1)

개발 블로그

브라우저의 Workflow를 통한 DOM과 가상DOM에 대한 이해

React를 공부하다보면 DOM에 대한 이야기가 계속해서 등장한다. 많은 React 사용자가 가상 DOM에 대해 알고 있다고 하지만, 자세히 설명해달라고 하면 명확하게 설명해주는 사람이 없었기에 브라우저를 기준으로 DOM과 가상DOM에 대해 정리해보려고한다. 브라우저의 Workflow DOM과 가상DOM에 대해 명확히 이해하려면 브라우저의 작동순서부터 알아볼 필요가 있다. DOM Tree 생성 브라우저가 HTML 을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM node로 이뤄진 트리를 만든다. 각 노드는 HTML엘리먼트들과 연관되어 있으며, 아래와 같이 만들어진다. Render Tree 생성 외부 CSS 파일과 각 HTML엘리먼트의 inline 스타일을 파싱해 만들어진 스타일 규칙을 사용하여..
IT/React 2021. 8. 18. 15:48
이전 Prev 1 Next 다음