[React] Virtual Dom

간단히 브라우저의 렌더링 과정은 이렇다. 

1. DOM Tree
2. Render tree 생성
3. Layout
4. Painting

📌 Virtual DOM을 사용하는 이유

Virtual DOM을 알아보기 전 어떻게 하여 사용하게 되었는지 알아보자 ! 

초기의 브라우저는 주로 정적인 페이지(많은 변화가 없음)를 보여주었기에 SSR(Server Side Rendering) 방식을 사용했다. 

SSR이란 ?
웹 페이지의 렌더링을 서버에 먼저 처리하여 완성된 HTML 파일을 브라우저로 전송하는 방식이다. 
단점 : 서버에서 렌더링하여 전달해주기 때문에 일부분의 데이터만을 업데이트 할 수 없다는 것이다. 

 

SPA랑 CSR 방식이 등장하면서 돔 업데이트가 많아지고 복잡해지는 것이 많아졌다. 

여기서 CSR(Client Side Rendering) 이란?
서버가 아닌 웹 사이트의 콘텐츠가 사용자의 브라우저에서 동적으로 생성되어 렌더링 되는 방식이다. 
단점: SEO에 매우 불리하다. 

➡️ 이래서 Next 와 Nuxt가 나옴(CSR 방식에 SSR 적용 가능 => SEO 에도 유리한 웹사이트 => 하이드레이션... 이건 나중에)

돔 업데이트가 잦아진다는 것은 DOM을 조작한다는 것인데 이런 브라우저 렌더링 과정을 다시 하게 되면서 많은 연산과 비용이 들게 되어 

결론적으로 프로그램의 성능이 저하되게 된다. 

 

이런 문제를 해결하고자 나온 것이 Virtual Dom이다.

 

Virtual Dom은 브라우저 돔 (Shadow Dom)의 가벼운 버전이다. 브라우저 돔의 돔 노드 트리를 복제한 자바스크립트 객체이다. 

Virtual Dom은 Class, style 속성은 있으나, Dom Api메서드는 없다. 

📌 Virtual Dom 동작 방식

 

1. 리액트가 UI 변경을 감지하면 리액트는 새로운 Virtual Dom트리를 생성한다.
2. New 와 Old Dom Tree를 비교하여 (Diff)를 찾는다.  => Fiber
3. Diff(변경된 부분)을 찾아서 실제 DOM에 반영한다.  -> 바뀐 부분만 반영하여 최소한의 렌더링 하기

➡️ 돔 트리 자체가 새로 생기는 것이 비효율적이라 생각할 수 있지만, 돔트리보다 렌더링 하는 과정에서 성능저하가 생긴다. 

그렇기 때문에 렌더링 전 Diff비교만으로서 비용이 절약된다. 

또한 가상 돔은 메모리 상에서만 동작하기에 빠르다.

📌 React 에서의 Virtual Dom 

Jsx는 js 의 확장된 문법이다. 그래서 이걸 바벨에 의해 JS로 변환해준다.

이 때 createElement함수 호출 => 자바스크립트 객체로 변경이 된다. 

Reconciliation: 재조정

내부에서 현재 가상돔과 바뀐 가상 돔의 비교작업이 이루지면서 가상돔과 실제 돔을 비교하여 일치시키는 과정이 있다. 
이것을 재조정이라고 한다. 

React Fiber 

Fiber가 Diff를 이용해서  변화된 부분을 찾아 필요한 부분만 다시 렌더링 한다.  리액트에서 관리하는 자바스크립트 객체이다. 
웹 애플리케이션에서 발생하는 애니메이션, 레이아웃, 사요앚 인터렉션에 올바른 결과물을 만드는 반응성 문제를 해결하는 것이다. 

• 작업을 작은단위 분할 후 우선순위 매김
• 비동기 작업
• 이전 작업 재사용하거나 필요하지 않을 경우 폐기 가능

Diffing Algorithm 

위에서 두개의 트리를 비교할 때 쓰이는 것이 디핑 알고리즘이다. 
DOM 요소 타입이 같은 경우, 동일한 내역은 유지하고 변경된 속성들만 갱신한다.

DOM 요소 타입이 다른 경우, 리액트는 이전 트리를 버리고 완전히 새로운 트리를 구축한다. 

key prop

key를 이용해서 어떤 엘리먼트가 변경되지 않아야할지를 알 수 있다. ➡️ 어떤 항목을 삭제, 변경할지 고유성 부여 목적

리액트는 일부 자동적으로 key를 부여하지만, <li> 태그는 key를 부여하지 않는다.

그래서 만약 고유한 <li>에 키를 부여하지 않았거나 고유한 키가 아니라면 

Warning: Each child in a list should have a unique "key" prop

이런 에러가 발생하게 될 것 이다. 

 

만약 key를 주지 않을 경우 리액트는 가상 돔 전체가 변화했다고 느껴 전체적으로 재조정하게 된다. 

 

 

🤔 나머지 정리

✅ HTML Node

Browser DOM에서 사용

✅ Reace Node

Virtual Dom의 기본 구성 요소, JS Object로 존재하고 리액트 속에 존재한다. 

JSX에서 작성된 코드는 컴파일 시 React Node로 변환된다.  

✅ JSX(JavaScript XML)

JS 확장 문법, React Node를 표현하는데 사용, 
React.createElement() 호출로 변환되어 사용

✅ Renderer

리액트의 렌더링 엔진으로 React Node를 HTML Node로 변환하여 브라우저에 그리는 역할을 한다.