브라우저를 통해 웹사이트에 들어가면 html 의 element들과 그 것들을 담고 있는 document 를 웹페이지라고 하는데, 브라우저는 이 웹페이지에 해당하는 html을 분석해서 화면에 나타나게 해 준다.
DOM (document object model)
DOM 이란, 웹페이지에 들어가 있는 html 요소들을 tree 형태의 구조로 표현한 것이다.
이 DOM tree 안에는 각각 요소(element)에 상응하는 노드가 들어있는데 ,
개발자들은 이 DOM이 제공하는 API 를 통해 DOM에 접근을 하고, 원하는 요소의 구조,스타일, 내용 등 을 원하는대로 변경할 수 있는 DOM 조작을 할 수 있다.
만약 자바스크립트를 이용한다면, getElementbyId() 혹은 quarySelecort() API를 통해 원하는 요소에 접근 해 변경했을 것이다.
브라우저 랜더링 과정
1. 브라우저에 렌더링 엔진이 html 코드를 읽고, 파싱(컴퓨터에서 컴파일러 또는 번역기가 원시 부호를 기계어로 번역하는 과정중 한 단계) 하여 DOM 트리를 생성한다.
2. css파일이나 html에 인라인으로 작성된 스타일 코드를 파싱하여 css DOM 을 구성한다.
이때만들어진 DOM tree와 CSS DOM을 결합하여 문서에 시각적인 구조를 나타내는 render tree가 만들어 진다.
3. Layout 단계 : 생성된 render tree의 각 노드들이 스크린 상 배치될 위치가 정해진다. (position, size 등 )
4. 구성된 Layout을 실제로 화면에 나타내는 reprint 작업을 통해 브라우저 화면에 UI가 나타나게 된다.
Virtual DOM이 생겨난 계기 = DOM 조작할때의 불편함
DOM이 조작될때
1.브라우저가 현재 페이지의 html을 쭉 탐색해서 변경되어야 할 element를 찾고, 해당 element와 자녀 element들을 돔에서 제거한다.
2. 새롭게 수정된 element들로 교체한다.
3. 변경된것에 대해 css를 다시 계산, 레이아웃 정보를 알맞게 수정하고 새롭게 계산된 내용에 따라서 브라우저에 다시 보여준다.
DOM을 조작할때마다 브라우저 화면의 UI를 새롭게 보여주는 작업은 너무 비효율적이며, 불필요한 행동이 반복되었고,
SPA (Single Page Application) 을 많이 사용하면서 DOM tree를 즉각적으로 많이 변경할 일이 생겨났다.
그래서 전체 페이지를 서버에서 매번 보내주는 형식 보다는 브라우저단에서 자바스크립트가 관리하기 때문에 DOM조작을 더욱 효율적으로 하기위해 최적화가 필요해짐
Virtual DOM
Virtual DOM
기존 DOM의 복사본이라 할 수 있으며, Virtual DOM은 실제 DOM이 아닌 자바스크립트를 객체 형태로 메모리 안에 저장되어 있다. Virtual DOM은 실제 DOM object와 같은 속성들을 가지고 있지만, 실제 DOM이 가지고 있는 API(직접적으로 화면에 보이는 UI를 조작할 수 있게 해 주는) 는 갖고 있지 않다.
그래서 직접적으로 브라우저 안에 있는 문서에 접근을 할 수 없으며, 화면에 보여지는 내용 또한 직접적으로 수정 할 수 없다.
이렇게 보면 왜 이용하는지 모르겠지만,
React가 Virtual DOM을 사용하여 실제 DOM을 조작하는 일을 매우 빠르게 할 수 있게 해 주는 역할을 해 주며,
실제 DOM이 아닌 메모리 상에서 동작하기 때문에 훨씬 더 빠르게 동작하고,
Virtual DOM tree는 실제 렌더링이 되지 않기 떄문에 연산 작업이 최소화 되어 연산비용이 적어 실제 DOM 리렌더링에 비해 아주 효율적이다.
(= 모든 변화를 하나로 묶어서 딱 한번만 실행이 된다)
React는 어떤식으로 Virtual DOM을 활용하는가??
현재 사용하고 있는 React는 Virtual DOM을 이용하는 대표적인 자바스크립트 라이브러리인데,
React 공식 문서에서는 React를
" UI 의 가상적인 표현을 메모리에 저장하고, React DOM과 같은 라이브러리에 의해 실제 DOM과 동기화 " 하는 프로그램인 개념이라고 설명하고 있고, 이 과정을 '재조정' 이라고 부른다.
React는 항상 2개의 Virtual DOM을 가지고 있다.
- 첫 번째 : 렌더링 이전의 화면 구조를 담은 객체
- 두 번째 : 렌더링 이후의 화면 구조를 담은 객체 이다.
React는 state가 변경될 때 마다 화면이 새로 렌더링 되는데,
=> 이 렌더링이 발생될 상황이 생길 때 마다 실제 브라우저에 그려지기 전 새로운 화면에 들어갈 내용이 담긴 virtual DOM을 생성한다.
=> (Diffing) 그 후 렌더링 이전의 화면 내용을 담고있는 첫 번째 Virtual DOM 과 업데이트 이후의 내용을 담고 있는 두 번째 Virtual DOM을 비교해 정확히 어느곳이 변경되었는지 찾아 내는 Diffing 과정을 거친 후
=> (Reconciliation: 재조정) 비교 후 바뀐 부분들만 실제 DOM에 적용시킨다.
즉, Virtual DOM에 변경사항이 반영되면, 원본 DOM에 필요한 변화만 반영되어서 전체 DOM을 바꾸지 않고 필요한 UI의 업데이트를 적용할 수 있게 되었다.
이러한 재 조정은 React의 'Batch Update (변경된 모든 element들을 집단으로 실제 DOM에 한번에 적용 시켜주는 작업)'덕에 가능하다
이러한 변경이나 업데이트가 모두 마무리 된 이후에 한거번에 실제 DOM에 이 결과를 업데이트 한다.
정리하자면
Virtual DOM -> React
1. 리엑트의 가상돔은 실제 DOM과 같은 내용을 담고 있는 복사본이며, 이 복사본은 자바스크립트 객체 형태로 메모리상 저장되어 있다.
2. 리엑트는 항상 두 개의 가상돔을 갖고 있는데, 첫 번째는 변경 이전의 내용을 담고있고, 두 번ㅂ째는 변경 이후에 보여질 내용을 담고 있다.
3. 변경된 내용이 실제 DOM에 적용되기 이전, React는 두 개의 가상돔을 비교하여 정확히 어떤 부분이 바뀌었는지 비교하여 파악 (Diffing)작업을 한다.
4. Diffing 을 통해 변경된 부분을 파악 후, react는 'batch update'을 통해 reconsilation(재조정) (실제 DOM 에 한번에 적용) 을 한다.
=> 전체 DOM tree가 처음부터 다시 그려지는것이 아니라, virtual DOM의 도움을 받아 새로 추가된 부분만 새로 그려지게 되는 것이다.