Virtual Dom에 대해(feat.리액트).araboja

 

Virtual Dom(가상 DOM)

 

가상 DOM은 실제 DOM에서 처리하는 방식이 아닌 Virtual DOM과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 프로그래밍 개념이다.

 

 

 

 

..?

 

 

 

 

우선 가상 DOM을 이해하기 위해서 DOM이 뭔지 부터, 브라우저 렌더링 과정을 알아야 한다.

 

https://jamgul.tistory.com/76

브라우저 렌더링을.araboja

 

요약

브라우저가 렌더링할때, HTML파일과 CSS파일을 DOM으로 만들고, 그걸 화면에 어떻게 출력할지 계산하고 출력해준다.

 

---

여기서 이제 문제가 살짝있는데 DOM을 수정하려면 저 렌더링과정을 모두 진행해야해서 많은 연산이 필요함

 => 프로그램 성능 저하됨

 

예전엔 SSR 방식(DOM 동작 많이 X)을 많이 사용했는데, CSR방식을 사용하면서 DOM 동작이 많이 복잡해졌다.그래서 DOM조작 하는거 최적화 필요가 생김 => 가상 DOM이 만들어짐

 

 

가상DOM이 가벼운 이유

 

DOM 노드트리를 복제한 자바스크립트 객체이다.

그래서 class, style 등의 속성은 가지고있는데, getElementById() 같은 DOM api를 가지고 있지 않기때문에 가볍다 !

 

 

---

가상DOM의 동작 방식

 

순서

1. 기존 DOM의 가벼운 버전을 복제한다.

2. DOM노드에 변화가 생기면 가상DOM은 다시 새로운 가상DOM을 처음부터 만든다.

3. 변경전의 가상 DOM트리와 변경후의 가상 DOM트리를 비교한다.

4. 변경된 부분만 실제DOM에 적용한다

 

 

근데 DOM의 변화가 생길때마다 새로 DOM을 만드는거 효율 별로일거 같은데여?

=> ㄴㄴ DOM 새로 만드는건 비용 별로 안듬.. 렌더링 하는 과정에서 비용이 많이 드는거임

     (가상 DOM안쓰면 변화할때마다 렌더링 함)

 

이러면 가상 DOM은 "버퍼링", "캐싱" 느낌이네여?

=> ㅇㅇ 변경 부분만 모아서 실제 DOM에 한번만 반영하는거라 그 느낌맞음, 그래서 성능 최적화에 굿임

 

 

---

리액트에서 Virtual DOM

 

 

1. 작동순서

 

1. JSX문법으로 작성함

2. Babel같은 툴로 JSX를 JS형식으로 바꿈. 이때 createElement 함수 호출

3. 함수에 의해서 객체로 바뀌게 됨. 

4. 객체에서 type은 태그이름, props는 jsx에 포함된 모든 속성들. props의 자식에는 하위 노드들이 포함됨

5. 이 객체를 활용해서 가상 DOM트리를 만듬, 렌더하면 실제 DOM 됨

 

 

2. 재조정

 

리액트 공식문서:

Virtual DOM은 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고  ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화 하는 프로그래밍 개념이다.

 

재조정 => 가상DOM과 실제DOM을 비교하고 일치시키는 과정

 

변경전 가상DOM과 변경후 가상DOM 두가지 트리를 비교해서 변화된부분만 실제DOM에 적용함

이 과정에 Diffing 알고리즘을 사용함

 

Diffing 알고리즘 : jsx가 자바스크립트 객체로 변화된 결과에서 type이라는 키값을 가진다.

변경전 리액트 엘리먼트의 타입과 변경후 엘리먼트 타입을 비교하여 2가지 행동을한다

 

1. 타입이 같은 경우 : 변경된 속성만 변경

2. 타입이 다른 경우 : 이전 트리를 삭제하고 재생성한다.

 

key prop을 사용하는 이유: 재조정과 연관있음. 재조정 과정에서 이전의 가상돔과 재생성 가상돔을 비교한다.

식별자로 key prop을 적용한다. 

자식노드들이 key prop을 갖고있으면 리액트는 키값으로  이전트리와 변경이후트리를 비교한다.

그러면 첫번째에 새로운 노드들이 추가되어도 문제없이 추가된 노드만 그릴수있따.

키값은 변경되지 않는 유일한 값을 넣어줘야한다.

만야 배열의 index를 키값으로 주면 배열의 index는 배열이 바뀔때마다 0부터 n가지 새롭게 할당된다. => 변하는값