기로그 기로그

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

DOM이란? 문서를 객체화 하여 트리로 만들어 놓은 상태. 자바스크립트를 통해 접근하고 제어한다. DOM 안녕하세요 DOM입니다 Document Object Model 자바스크립튼 동적인 요소를 제어하기위해 등장했다. 이 DOM트리를 이용해서 웹페이지의 요소에 접근하고 제어 할 수 있다. 브라우저에는 웹 문서를 해석하는 엔진이 내장되어 있다. (대표적으로 구글의 V8엔진) 엔진은 코드를 위에서 한줄씩 읽어가며 해석한다. 해석이 끝나면 전체 문서를 객체화 하여, 자바스크립트로 접근 할 수 있게 해준다. 문서를 객체화 한 DOM은 트리구조를 가지고 있고, 각각의 객체를 노드 라고 한다.상위에 있는 노드를 '부모노드'라고 하고, 부모요소 하위에 있는 노드들은 '자식노드'라고 한다.이 DOM 트리 최상위 루트인..