[React] Virtual DOM

Virtual DOM => 리액트의 주요 특성!!!

리액트가 만들어진 이유부터 생각해보자!

• JavaScript와 DOM

  • JavaScript를 사용하여 HTML 로 구성한 UI를 제어하면서 브라우저의 DOM Selector API를 사용하여 특정 DOM 을 선택한뒤, 특정 이벤트가 발생하면 변화를 주도록!

    const number = document.getElementById('number');

  • 사용자와의 인터랙션이 별로 없는 웹페이지라면 상관없겠지만, 만약에 인터랙션이 자주 발생하고, 이에 따라 동적으로 UI 를 표현해야된다면, 이러한 규칙이 정말 다양해질것이고, 그러면 관리하기도 힘들어질것이다.

  • 대부분의 경우 웹 애플리케이션의 규모가 커지면, DOM 을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉽다.

  • 처리해야 할 이벤트도 다양해지고, 관리해야 할 상태값도 다양해지고, DOM 도 다양해지게 된다면, 이에 따라 업데이트를 하는 규칙도 많이 복잡해지기 때문에, 조금 과장을 많이 하자면 코드가 다음과 같은 형태가 된다.
    

• 프레임워크의 등장
  • 그래서, Ember, Backbone, AngularJS 등의 프레임워크가 만들어졌었는데, 이 프레임워크들은 작동방식이 각각 다르지만, 쉽게 설명하자면 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해주어서, 업데이트 하는 작업을 간소화해주는 방식으로 웹개발의 어려움을 해결해주었다.
• 리액트의 등장
  - 리액트는 어떠한 상태가 바뀌었을때, 그 상태에 따라 DOM 을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 개발이 시작되었다.
  - 동적인 UI 를 보여주기 위해서 모든걸 다 날려버리고 모든걸 새로 만들게 된다면, 속도가 굉장히 느릴 것입니다. 작은 웹애플리케이션이라면 상관없겠지만 규모가 큰 웹애플리케이션이라면 상상도 할 수 없는 일!

  이를 가능하게 한 것 → Virtual DOM

Virtual DOM

• 가상의 DOM 인데, 브라우저에 실제로 보여지는 DOM 이 아니라 그냥 메모리에 가상으로 존재하는 DOM 으로서 그냥 JavaScript 객체!
• 리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링한다.

그럼 어떻게 virtual dom으로 DOM 조작을 최소한으로 할까?

• 각 컴포넌트가 반환하는 엘리먼트를 이전에 반환했던 엘리먼트와 비교하고(Reconcilation), 다른 경우에만 해당하는 DOM 노드에 CRUD 작업을 수행한다.

위에서 설명했던 것처럼 기본적으로 virtual dom은 실제 DOM과 동일한 상태를 가지고 있으며, 표현하는 형식만 다르다.

1-1) 특정 컴포넌트에서 setState 호출 등의 이유로 컴포넌트 상태가 변하면 해당 컴포넌트의 shouldComponentUpdate 함수를 실행한다. 그리고 이 함수가 true를 반환하면 render 함수를 실행한다.

Note: shouleComponentUpdate 함수가 false 를 반환하면 이 컴포넌트의 render 함수를 실행하지 않고, 자식 컴포넌트의 shouldComponentUpdate, render 함수도 실행하지 않는다.

1-2) 상태가 변한 컴포넌트를 루트 노드로 해서 깊이 우선 탐색 방식(DFS)으로 각 자식 컴포넌트의 shouldComponentUpdate 함수와 render 함수를 실행한다.

2) 이렇게 render 함수를 실행하여 얻은 새로운 virtual dom을 실제 dom과 동일한 구조를 가진 이전 virtual dom과 비교하여 변경된 부분을 찾는다.(reconcilation: 재조정)

3) 실제 변경된 부분만 실제 DOM에 DOM API를 호출하여 반영한다. 브라우저가 변경 사항이 반영된 DOM과 CSSOM으로 새로운 Render Tree를 생성해서 화면을 다시 그린다.

그렇다면 정말 virtual dom은 빠를까?

• 간단한 작업(예, 단순한 라우팅 작업만 있을 경우) 일 경우에는 리액트를 사용하지 않는 편이 더 효과적일때가 있다는 말이다. 또한 코드 최적화를 열심히 한다면 속도 문제를 개선할 수 있을 것이다.
• 리액트가 보장하는 성능은 바로 업데이트 처리 간결성이다. 무조건적으로 리액트를 사용하는 것이 아닌 항상 기술적 타당성을 검토하며 개발하는 자세가 필요하다.