렌더링이란?

리액트 강의를 듣다보니 렌더링이라는 단어가 자주 등장한다. 렌더링의 개념을 제대로 파악하지 못한 것을 문득 깨닫고 정리해보기로 했음.

렌더링 정의

렌더링(rendering)은 컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들어내는 과정을 말한다.
위키백과에 작성된 설명인데 솔직히 어렵기만하고 잘 와닿지 않는다.
쉽게 말해 서버에서 HTML파일을 받아 브라우저에 뿌려주는 과정이다.

렌더링 과정

1. HTML파일과 CSS파일을 파싱해 DOM트리를 만든다. ☞ Parsing
2. RenderingTree를 만든다. ☞ Style
3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다. ☞ Layout
4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다. ☞ Paint
5. 레이어를 합성하여 실제 화면에 나타낸다. ☞ Composite

파싱(Parsing: 구문분석)은 문서의 내용을 토큰(token)으로 분석하고 이들로 이루어진 파스트리(parse tree)를 만드는 과정을 말함)
DOM트리 : 하나의 태그로 구성된 형태