react는 virtual DOM을 사용한다.
virtual DOM(가상 DOM)은 무엇인가!
virtual DOM이 왜 필요한지 알려면 먼저 브라우저의 렌더링 과정을 알아야 한다.
브라우저 렌더링 과정
브라우저를 렌더링 할 때
1. 서버에서 받아온 html파일을 파싱하여 DOM 트리를 생성한다.
2. CSS 파일을 파싱하여 CSSOM 트리를 생성한다.
3. DOM 트리와 CSSOM 트리를 결합하여 렌더트리를 생성한다.
4. layout - 각 노드의 좌표에 따라 위치를 설정해준다
5. paint - 사용자의 화면에 그려준다.
문제는 좋아요를 누른다거나 하는 상태가 변경된다면 전체 노드들이 위의 렌더링 과정을 반복하게 된다.--> 매우 비효율적,,
더군다나 SPA 싱글페이지어플리케이션을 사용하게 되면서 즉각적인 상태변경이 많이 일어나게 된다. 때문에 페이지를 브라우저에서 관리하는 것이 필요해졌다.
이를 위해서 virtual DOM 가상 돔이 등장했다.
가상 돔은 복사본이라고 생각하면 좋다.
데이터가 변경되면 전체 ui는 가상돔에 렌더링된다. 그리고 이전 DOM과 비교해서 변경된 부분만 실제 DOM에 적용한다.
Diffing 알고리즘
virtual DOM이 업데이트 되면 react에서 이전의 DOM과 새로운DOM을 비교 검사하는 것을 diffing 알고리즘이라고 한다.
virtual DOM은 왜 사용하나.
가상돔은 리액트가 컴포넌트 상태변경에 따른 DOM조작을 최소화하기 위해 사용된다. 상태 변경 시에만 기존 DOM과 비교하여 그 부분만 적용되므로 불변성을 유지할 수 있다.
가상 DOM은 메모리에 저장되어 속도가 빠르다.
