[React] Virtual DOM의 특징, props와 state에 대한 설명

💡 이전에는 그냥 '그렇구나.' 하면서 넘어갔던 DOM과 Virtual DOM의 개념적인 측면에서 접근하며 알아보면서 왜 Virtual DOM이 등장했는지 좀 더 깊게 알아볼 수 있는 시간이었습니다.

💡 불변성에 대해 이해하기 위해 기본형 데이터와 참조형 데이터를 다시 한 번 곱씹어 볼 수 있는 시간을 가졌습니다.

---

1. DOM 과 Virtual DOM(가상 DOM)

DOM 에 대한 간단한 설명 후 Virtual Dom 이 왜 필요한지, 그리고 props와 state에 대해 얘기하고자 한다.

1.1  DOM

⚪ 먼저, 렌더링에 대해서 말하고자 한다. 렌더링이라는 것은 브라우저가 클라이언트가 시각적으로 볼 수 있도록 화면에 출력하는 단계를 의미한다. 이 렌더링이 가능하도록 브라우저는 기본적으로 렌더링 엔진이라는 것이 있다.

⚪ 그런데 브라우저는 렌더링 이전에 파싱이라는 과정을 거친다. 파싱은 HTML 문서[파일]를 해석하는 단계이다.

렌더링 엔진이 HTML 문서에 코드 한 줄, 한 줄 보면서 해석을 한다. 해석을 한다는 것은 서버로부터 받아온 HTML문서를 javascript가 바로 이해할 수 없기 때문에 javascript가 알아들을 수 있는 방식으로 해석을 한다는 것이다.

브라우저는 그렇게 Javascript가 알아들을 수 있는 방식으로 해석한 내용을 토대로 DOM tree를 구성한다.

밑의 예시 사진처럼 말이다.

DOM Tree

 

⚪ 자바스크립트가 알아들을 수 있는 방식으로 해석한 DOM Tree 뿐만 아니라 CSSOM Tree 라는 것을 묶어서 Render Tree 를 구성하게 된다. 이 때 Render Tree 라는 것은 HTML, CSS 및 JavaScript 문서를 파싱(문서[파일]를 해석)하여 

브라우저에서 실제로 렌더링되는 최종 문서 모델을 나타내는 객체의 계층 구조이다. 쉽게 말해서 화면에 그려지기 직전의 최종 객체 구조, 최종 버전이라고 보면 된다. 이후에 브라우저에 그림을 그리기 위한 레이아웃 계산, 페인팅, 합성 과정 등을 거친 후 클라이언트에게 시각적으로 보여지게 되는 것이다.

⚪ 한 문장으로 DOM 을 설명하자면, ✔Document(HTML파일)를 Javascript가 알아먹을 수 있는 Object(객체) 형태로Modeling 한 것을 말한다.

⚪ ++자바스크립트는 위에서 만들어진 DOM을 이용하여 Document 라는 전역 객체를 통해 각 태그들에 접근할 수 있다. (그 중 window라는 객체는 document 객체의 상위에 위치한다.)

 

---

 

1.2  Virtual DOM

💬그런데 왜 가상 돔이 나오게 된 것일까?

 위에서 파싱이후에 렌더링이라는 과정이 있다고 언급하였다. 웹브라우저에서 DOM 변화가 일어나면 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리 페인트 즉 렌더링이 일어난다. 기존의 DOM은 DOM 모델링 자체는 빠르지만 이 렌더링이라는 과정에서 시간이 허비가 된다는 것이다. 기존 DOM의 속도적인 부분과 기타 버그들이 발생하여 브라우저가 죽는 일 등의 발생을 개선하고자 가상 돔(Virtual DOM)이 나오게 되었다.

 

⚪ Virtual DOM은 DOM의  ✔(현재)상태를 메모리에 저장하고, ✔ 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영하는 기능을 가지고 있다. '비교' 라는 과정을 풀어서 말하자면 이전의 가상 돔과 현재의 가상 돔을 비교하여, 그러니까 이전이후 가상 돔끼리 전체를 ✔'한 번만' 비교를 하여 바뀐 부분만 실제 DOM에 적용을 하게 된다는 것이다. 이로써 기존 DOM의 렌더링보다 성능을 향상시킬 수 있다.

 

💬 가상 돔의 구조?

 기존 DOM과 완벽히 동일한 복사본 형태이다.

실제 DOM은 DOM 요소를 조작하는 것.

✔가상 DOM은 실제DOM을 복사하여 자바스크립트 객체(Object) 형태로 메모리에 저장함.

그렇기 때문에 실제 DOM을 조작하는 것보다 훨씬 빠르게 조작을 수행할 수 있다.

(실제 DOM을 조작하는 것보다 메모리상에 올라와있는 javascript 객체를 변경하는 작업이 훨씬 가볍다!)

 

💬 가상 DOM의 동작 과정

[STEP 1]

이 과정에서 리액트는 항상 2가지 버전의 가상DOM을 가지고 있다.

1. 화면이 갱신되기 전 구조가 담겨있는 가상DOM 객체(Tree 형태의 가상 DOM)
2. 화면 갱신 후 보여야 할 가상 DOM 객체(state 변경 후의 가상 DOM)

리액트는 state가 변경돼야만 리렌더링이 된다. 그 때, 바로 2번에 해당되는 가상 DOM을 만드는 것이다.

 

[STEP 2 : diffing 과정 = 비교 단계]

state가 변경되면 2번에서 생성된 가상돔과 1번에서 이미 갖고있었던 가상돔을 비교해서 어느 부분(엘리먼트)에서 변화가 일어났는지를 상당히 빠르게 파악해낸다. (=> 상당히 빠르게 파악해내는 것이 리액트의 자체 알고리즘이다.)

 

[STEP 3 : 재조정(reconciliation)]

파악이 다 끝나면, 변경이 일어난 그 부분만 실제 DOM에 적용시켜준다. 적용시킬 때는, 한건 한건 적용시키는 것이 아니라, 변경사항을 모두 모아 한 번만 적용을 시킨다.(Batch Update 🔥)

 

 

💬 React가 택한 업데이트 방식:  Batch Update

*batch: 집단[무리]

virtual DOM의 변경사항이 다 끝날 때까지 브라우저 DOM, 즉, 실제 DOM에 아직 반영하지 않는다.

Diffing 과정이 다 끝나서 전체 변경사항이 파악이 완료된 후에 딱 한 번만 업데이트 한다. 이런 방식이 Batch Update이다.

DOM에서 가장 비싼 작업( = 오래 걸리는) 작업은 painting 작업이다. painting 작업은 실제로 화면에 element를 그려주는 작업을 말한다. 이 그려주는 작업을 딱 한 번만 갱신하는 것이다. 그래서 엄청나게 빠른 속도를 보여준다.

 

예를 들어 클릭 한 번으로 화면에 있는 5개의 엘리먼트가 바뀌어야 한다면

• 실제 DOM : 5번의 화면 갱신 필요
• 가상 DOM : Batch Update로 인해 단 한번만 갱신 필요

이런 차이가 있다.

 

 

Batch Update 방식을 바탕으로 다음과 같은 현상을 이해할 수 있게 된다.

setCount(count + 1)
setCount(count + 1)
setCount(count + 1)

이렇게 3개를 연달아 납둬도 1만 올라간 count를 그려주는 이유가 바로 이런 이유 때문이다.

count + 1 이 된 것이 아직 실제 DOM에 반영이 되지 않았기 때문인 것이다.

count를 계속 꺼내와서 state를 바꾸려고 해봤자 업데이트 전의 count는 꺼내올 때마다 계속 0인 상태가 되는 것이다.

 

---

1.3  리액트의 props와 state

🔵  props 

 props는 정말 간단하게 부모 컴포넌트가 자식 컴포넌트에게 물려주는 데이터를 의미한다.

props에 대해서는 따로 글을 써서 링크를 첨부한다.

props 링크

 

🔵  state 

 Virtual DOM 설명 부분에 이전 가상 돔과 이후 가상 돔의 비교하여 적용한다고 언급하였다. 비교할 때 사용되는 개념이 바로 state이다. state는 상태, 말 그대로 이전 상태와 이후 상태를 비교하게 되는 것이다. State에 대해서 좀 더 정확히 말하자면 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 리액트에서 이 state를 만들 때는 useState() 라고 하는 stateHooks를  사용하게 된다. 

 

💬 useState의 기본 형태

const [ value, setValue ] = useState( 초기값 )

 

간단하게 value는 useState 안에 들어있는 초기값을 담을 식별자이다.

setValue는 value에 담겨있는 값을 변경할 수 있는 메서드이다.

 

 

💬 state에 대해서 얘기할 때는 불변성에 대해서 꼭 알아야 한다.

불변성에 대해서 얘기하기 전에 자바스크립트의 데이터 종류인 기본형 데이터와 참조형 데이터에 대해서 알고 있어야 한다.

✔ 원시[기본형] 데이터 : Boolean, number, string, 등

✔ 참조형 데이터: 배열, 객체, 함수

 

⚪ 기본형 데이터는 변수 영역은 변하는 특징(=변수)과 데이터 영역은 변하지 않고 새로 생성하는 불변성을 가지고 있다.

그렇기 때문에 위의 useState 기본 형태에서 setValue를 통해 이전의 초기값이 담긴 식별자 value의 값을 바꾼다면 새로 생성된 데이터 영역을 참조하게 되어 변수영역이 참조하고 있는 주소가 변화되고 이 변화를 감지했기 때문에 렌더링을 발생시킨다.

 

⚪ 참조형 데이터는 기본형 데이터와는 다르다. 그림을 보고 이해하도록 하자.

// 참조형 데이터는 별도 저장공간(obj1을 위한 별도 공간)이 필요합니다!
var obj1 = {
	a: 1,
	b: 'bbb,
};

 ⚪ 참조형 데이터는 변수영역(obj1/@7103~) 은 변하지 않고(=상수) 데이터 영역(Obj 별도)이 변하는 가변성을 가지고 있다. 만약 obj1.a 에 새로운 값을 할당했을 때 여기서 변하는 부분은 obj별도의 7103에 담긴 a/@5001 이 부분이다.

변수 영역(obj1/@7103~)은 변하지 않는다. (이해가 안된다면 프로퍼티가 참조하고 있는 주소가 변한다고 생각하자.)

 

⚪ 이렇게 참조형 데이터는 기본형 데이터처럼 새로 값을 할당해도 결국 변수 영역 메모리 주소는 그대로 이기 때문에 리액트에서 state가 변했다고 판단하지 않는다. 그래서 리렌더링이 발생하지 않는다. 아무리 값을 재할당해도 변수영역메모리는 그대로이고 Obj 별도부분만 바뀌는 가변성을 가지고 있는 것이다.

 

⚪ 그렇기 때문에 ✔참조형 데이터가 불변성을 지킨다는 것은 아예 새로운 배열이나 객체를 만들어서 그 새로운 객체나 배열로 이전 state를 갈아 끼우는 것을 의미한다. 이렇게 되면 변수영역 메모리 주소도 갈아끼워지기 때문에 비로소 리엑트에서 아예 새로운 state로 인식하여 리렌더링을 해준다.

 

 

---