기로그 기로그

리액트의 대표적인 특징인 가상 DOM을 사용하는데 있어서브라우저가 렌더링되는 과정을 이해하는게 중요하다. 브라우저 렌더링 과정을 통해서 가상 DOM이 어떻게 생겨났는지 알아본다. 브라우저 렌더링과 DOM 1.사용자가 어떤 웹 페이지를 방문한다. 브라우저는 사용자가 요청한 주소의 HTML 파일을 다운로드한다. 2.브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구성된 DOM트리를 만든다. 3.DOM을 생성하다 CSS 파일을 만나면 해당 CSS파일도 다운로드하여 CSS도 파싱하고 트리를 생성한다(CSSOM) 4.브라우저는 DOM노드를 2번에서 생성된 DOM트리를 순회하며 사용자 눈에 보이는 노드만 방문한다. (* 분석과정을 조금이라도 줄이기 위해서 display:none과 같은 화면에 보이지 않는 ..