- 브라우저의 동작
- 브라우저 렌더링 과정
- DOM 조작의 비효율성
- Virtual DOM의 등장
- virtual dom의 등장
- virtual dom의 동작 원리
- Reat의 virtual DOM
- JSX
- Reat의 virtual DOM
- diffing 알고리즘
- dom tree 생성 - 렌더 엔진이 html을 파싱하여 dom 노드로 이루어진 트리 생성
- render tree 생성 - css파일과 inline스타일을 파싱. dom+CSSOM = 렌더 트리 생성(시각적인 구조 나타냄)
- 레이아웃 단계 - 각 노드들의 스크린에서의 좌표에 따라 위치 결정(position, size등이 여기서 계산)
- 페인트 단계 - 실제 화면 그리기 (브라우저 화면에 우리가 보이는 UI가 보임)
여기서 문제
상호작용 (좋아요 버튼 클릭) 등 발생할때, 렌더트리가 그때마다 재생성.
변화 발생하면 모든 요소들의 스타일을 다시 계산, 레이아웃 과정 그후 페인트과정을 거쳐야함.
spa - 전체 페이지를 서버에서 매번 보내주는것이 아니라, 브라우저단에서 js가 관리하기 때문에 dom 조작의 최적화가 필요.
-> Virtual DOM의 등장
데이터가 변경되면 전체 UI는 virtual DOM에 렌더링됨
그리고 이전 virtual dom에 있던 내용과 업데이트 후에내용을 비교하여 바뀐부분만 실제 DOM에 적용시킴.
-> 전체 real DOM을 바꾸지 않고도 필요한 UI의업데이트를 적용할수있음.
virtual dom은 html 객체에 기반한 js 객체로 표현.
이런 처리는 실제 dom이 아닌 메모리상에서 동작 -> 훨씬 빠르게 동작
virtual dom tree는 실제 렌더링이 안되므로 연산비용이 적음.
요소가 30개 바꼈다고 레이아웃을 30개씩 새로 하는것이 아니라
모든 변화를 하나로 묶어서 딱 한 번 실행. -> 실제 돔 리렌더링에 비해 효율적
virtual dom이 하는건, dom fragment에 변화를 묶어서 적용시킨다음 기존 dom에 던져주는 과정.
react -> virtual dom을 이용하는 대표적 js 라이브러리.
"UI의 가상적인 표현을 메모리에 저장하고,
React DOM과 같은 라이브러리에 의해 실제 DOM과 동기화" -> 재조정이라 명명.
JSX를 컴포넌트에서 리턴시키면, 바벨은 JSX를 React.createElement()호출로 컴파일함.
react elements는 dom요소의 가상버전으로 가볍고,상태를 가지지 않으며, 불변성 유지.
light, immutable, stateless -> 불변성 덕분에 비교하고 업데이트 하는게 쉬워짐.
react elements는 reactDOM의 render에 의해 비로소 실제 DOM 요소가 됨.
ReactDOM.render(element, document.getElementById('hihi'));// <- 실제 돔에 반영UI를 업데이트 할 수 있는 유일한 방법은,
새로운 요소를 만들어 ReactDom.render()로 전송하는 것뿐.
모든 리액트 돔 오브젝트는 그에 대응하는 virtual dom object가 있다.
그리고 virtual dom object는 그 dom object 하나하나에 매핑됨.
데이터가 업데이트 되면 바뀐 데이터를 바탕으로, React.createElement()를 통해 JSX element를 렌더링함. 이때 모든 각각의 virtual dom object가 업데이트됨. <- 빠르므로 비용이 많이 들지 않음.
virtual dom 업데이트 되면 react는 virtual dom 업데이트 이전에 virtual dom스냅샷과 비교하여 어떤 virtual dom이 바뀌었나 검사. <- diffing 알고리즘(재조정)
About diffing
element의 속성값만 변한경우 -> 속성 값만 업데이트
element의 태그 또는 컴포넌트가 변경된 경우
-> 해당 노드를 포함한 하위 모든 노드를 unmount 후 새로운 virtual dom으로 대체
이런 변경 및 업데이트가 모두 마무리 된 후에 딱 한 번 실제 DOM에 이 결과를 업데이트.
무조건 virtual DOM?
NO.
정보 제공만 하는 웹페이지라면 인터렉션이 없기 때문에 일반 DOM의 성능이 더 좋음.
SPA 로 제작된 큰 규모의 웹페이지에서는 virtual dom을 사용해서 브라우저의 연산 양을 줄여 성능을 개선할수있다.
