렌더링

리액트의 렌더링부라우저에서의 렌더링이란 HTML과 CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정이다. 사용자가 보게되는 결과물을 만드는 작업이기 때문에 중요한 과정이며 렌더링 방식이 성능에 큰 영향을 주게된다. 리액트의 렌더링이란리액트에서의 렌더링은 브라우저 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다. 이는 모든 컴포넌트들이 갖는 props와 state의 값을 기반으로 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정이다.해당 컴포넌트가 props와 state 같은 상태값을 갖고 있지 않다면 반환하는 JSX 값에 기반해 렌더링이 일어나게 된다.  리액트 렌더링 트리거리액트에서 렌더링이 발생하는 시나리오는 다음과 같다.최초 렌더링: 사용자가 처음 애플리케이션에 진입한 경우클래..

리액트의 특징으로 가장 많이 언급된 것 중 하나는 바로 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 하지만 가상 DOM이 외 만들어졌는지, 실제 DOM과 어떻게 다른지, 그리고 정말 실제 DOM을 조작하는 것보다 빠른지에 대해서는 잘 모르는 경우가 많다. DOM과 브라우저 렌더링 과정DOM은 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다. 브라우저가 웹 사이트 접근 요청을 받고 화면을 그리는 과정에서 정확히 어떤한 일은 아래의 과정과 같다.브라우저가 URL에서 HTML 파일을 다운로드한다.HTML을 파싱하여 DOM 노드 트리를 만든다.(2)번 과정에서 CSS 파일을 만나면 CSS 파일을 다운로드한다.CSS도 파싱해 CSSOM을 구성한다.(2)번 DOM 노드를 순회..

구글의 V8 JS 엔진으로 빌드된 JS 런타임 환경인 Node.js의 등장으로 JS는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 언어가 되었다. 하지만 JS는 여전히 웹 브라우저 환경에서 많이 동작하는 클라이언트 사이드이다. 대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행되지만 웹 애플리케이션의 클라이언트 사이드 JS는 브라우저에서 HTML, CSS와 함께 실행된다. 이번 쳅터에서는 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링하는지 알아보자.파싱: 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 토큰으로 분해해 문법적 의미와 구조를 반영해 트리구조인 파스 트리를 생성하는 과정이다.렌더링: HTML, CSS,..

브러우저의 랜더링 원리 브라우저가 화면에 나타나는 요소를 렌더링할 때, webkit이나 Gecko 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript를 렌더링할 때 CRP(Critical Rendering Path)라는 프로세스를 사용하며 아래의 단계들로 이루어진다. 토큰화된 HTML 문자열들을 이용해 DOM(Document Object Model) 트리를 구축 DOM은 Javascript를 이용해 실제 상호작용할 수 있는 HTML 엘리먼트로 이루어진 객체 HTML 파서의 특징 너그러운 속성 ▶ 최상단에 태그, 닫는 태그를 작성하지 않아도 정상적으로 렌더링된다. (HTML은 대부분의 프로그래밍 어너가 속한 촘스키의 문맥자유문법에 속하지 않기에 그렇다 한다) 파싱 과정..