렌더링...

렌더링 (Rendering) 이란, 현재 컴포넌트의 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미함.

렌더링

렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다.

브라우저는 서버로부터 HTML 문서를 다운 받는다.
렌더링 엔진은 HTML 문서를 파싱해서 DOM 트리를 만든다.

그 다음, 외부 css 파일과 함께 포함된 스타일 요소를 파싱하여 CSSOM 트리를 만든다.
스타일은 브라우저의 자체 스타일, 사용자 정의 스타일, html 태그에 걸려있는 스타일 순서로 처리되며, 나중에 처리되는 스타일을 따르게 된다.

따라서, 인라인으로 들어가있는 스타일 속성이 우선순위를 가지는 것이다.

다음으로, DOM 트리와 CSSOM을 결합하여 렌더링 트리를 형성한다.

이때, 화면에 드러나지 않는 head 태그나 display 속성에 none 값이 할당된 요소는 렌더 트리에 포함되지 않는다.

다음은 기기의 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 과정이 진행된다. 이 단계가 레이아웃 단계이며, 리플로우라고도 한다.

페이지에서 각 객체의 정확한 크기와 위치를 파악하기 위해 브라우저는 렌더링 트리의 루트부터 시작하여 렌더링 트리를 순회한다.

이 작업이 끝나면, 이제 렌더링 엔진은 각 요소가 어디에 어떤 크기로 표현될지 알게 된다. 렌더링 엔진은 페인트 이벤트를 발생시켜 렌더링 트리를 화면에 그리고, 이 과정을 페인팅 또는 래스터화 라고 한다.

모든 HTML 을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 진행한다.
웹페이지에 접속했을 때, 페이지가 한꺼번에 뜨지 않고 점점 화면에 그려지는것이 이 때문이다.

컴퓨터 마크업 언어에서의 의미

마크업 언어가 갖는 특성으로, 작성된 마크업 언어를 엔진이 해석해서 사람의 눈으로 볼 수 있도록 만들어(그려)주는 과정을 ‘렌더링’이라고 한다.

웹페이지는 크게 HTML(웹 페이지 본문), CSS(웹 페이지 디자인), JavaScript(웹 페이지 동적 부분) 세 가지의 컴퓨터 언어로 구성되어 있고 웹 브라우저의 엔진이 이를 해석해서 보여주게 된다.
Microsoft Word를 비롯한 Microsoft Office 문서, 한컴오피스 한글을 비롯한 한글과컴퓨터 한컴오피스 문서의 경우도 일정 버전 이상부터는 문서의 내용을 XML 또는 이와 유사한 마크업 언어로 저장하고, 이러한 문서를 다시 불러오게 될 때 렌더링 과정을 거치게 된다.
이러한 구조를 가진 Microsoft Office, 한컴오피스 한글 문서는 반디집 등을 통해 압축을 해제하여 그 구조를 확인할 수도 있고, 여기에 XML 파일과 문서의 구성요소를 이루는 다른 리소스 등을 확인할 수 있다.
Microsoft Office의 경우 2007 버전 이상부터 도입되었는데 이를테면 워드 문서의 확장자가 기존의 .doc 에서 바뀐 .docx 확장자가 바로 doc+XML 라는 의미이다. 파워포인트 및 엑셀 등 다른 문서도 동일하다.
한글과컴퓨터 한컴오피스의 경우, 최근 HWPX 포맷이 공개되기 이전부터 이미, 별도의 확장자를 만들진 않았지만 2010 버전부터 알게 모르게 적용하여 사용해오고 있었다. 한쇼 및 한셀 등 다른 문서도 동일하다. 물론 한글 문서를 외부 라이브러리에서 불러오고 해석할 수 있는 지는 논외로 치자
나무위키를 비롯한 위키도 우리가 쉽게 접할 수 있는 마크업 언어의 사례 중 하나다. 우리가 나무위키 문법으로 작성하면, 나무위키 엔진이 이를 해석해서 HTML로 변환하고, 다시 브라우저 엔진이 이를 해석해서 보여주게 된다.