React 가상돔

리액트의 주요 특징 -> 가상돔 사용

 

1. 브라우저가 렌더링하는 과정

1-1) 웹 페이지 빌드 과정(Critical Rendering Path CRP)

- 서버에서 HTML문서를 브라우저로 전달 후 브라우저가 문서에 따라 화면을 보여주기 위해 HTML은 DOM으로 DOM Tree를 구성 한후,  DOM과 CSSOM을 합쳐서 Render Tree를 만들고 Layout 단계와 Paint 단계를 거쳐서 화면에 보여주게 된다.

즉, 웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정을 말한다.

1-2) DOM Tree 생성 과정

- 렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링할지 결정한다.

 

1-3) Render tree 생성 과정

- 브라우저가 DOM과 CSSOM을 결합하는 곳이며, 이 프로세스는 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력한다. 즉 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함한다.

 

1-4) Layout(reflow)

- 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계

 

1-5) Paint

- 실제 화면에 그리기

 

1-6) 문제점

- 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그 때 마다 Render Tree가 재생성 됩니다. 즉 모든 요소들의 스타일을 계산, Layout, Repaint 과정까지 다시 거치게 되기에 인터렉션이 많으면 DOM을 많이 조작하여 조작하는 비용이 너무 크게 된다.

 

1-7) 가상 돔(Virtual Dom)

- 위의 문제점을 해결하기 위해 나온 것으로 가상 돔이란 실제 DOM을 메모리에 복사해준 것으로 생각하면 된다.

1-7.1) 가상돔의 작동 원리?

- 데이터가 바뀌면 가상돔에 렌더링되고 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용을 시켜준다.

1-7.2) Diffing

- 바뀐 부분을 찾는 과정

1-7.2) 재조정(reconciliation) 

- 바뀐 부분만 실제 돔에 적용시켜주는 것