[React] Virtual Dom 파헤치기

왜 React를 쓰는가??

React 는 virtual dom 이 있기 때문이지!

 

virtual dom 이 뭔데?!

 

이제 알아보자 😄

 

Virtual Dom 이란?

Virtual DOM(가상 DOM)은 UI 업데이트의 효율성을 극대화하기 위해 실제 DOM(Document Object Model)의 가벼운 복사본을 메모리 상에서 유지 관리하는 기술이다. DOM 조작이 느린 브라우저 환경에서 성능을 개선하는 데 중요한 역할을 한다.

 

React에서의 Virtual Dom 작동방식

React는 Virtual DOM을 기반으로 컴포넌트를 효율적으로 렌더링한다.

 

위 그림과 같이 우리가 html 을 직접 조정하는 것 같지만 실은 우리는 실제 돔 트리의 node 가 아닌 React.node 를 조작하고 있다는 것이다. 그렇기 때문에 우리는 document.createElement 과 같은 코드를 통해 작성하지 않아도 <div/> 이런 태그만으로 요소를 생성해 낼 수 있고 간편하게 style 작성도 가능하다. 

 

 

react 에서의 vDom 작동방식을 알아보자.

1. Virtual DOM 생성
   React 컴포넌트가 렌더링되면 가상 DOM 트리가 생성된다. 
2. 변경사항 감지
   애플리케이션 상태가 변경되면 React는 새로운 가상 DOM을 생성하고 이전 가상 DOM과 비교한다. 이를 "디프(diffing)" 과정이라고 하며 이는 리액트의 "Fiber" 가 수행한다. "Fiber"가 리액트에 도입되면서 작업 중단 및 재개, 재사용, 버림, 우선순위 부여 등이 가능해져 작업속도나 성능이 개선되었다. 
3. 최소한의 업데이트 계산
   비교 결과를 바탕으로 실제 DOM에서 변경이 필요한 부분만 추적하고 업데이트한다. 이 과정에서 "패치(patching)"가 이루어진다. 
   트리의 변경 부분을 확인하여 업데이트가 필요한 부분을 계산하는 역할은 재조정자(Reconciler)가 수행한다.
4. 실제 DOM 업데이트
   변경된 부분만 실제 DOM에 적용하여 브라우저가 화면을 다시 그리도록 한다.
   이과정에서 fiber가 renderer에게 변경사항을 전달하면 renderer는 동기적으로 실행한다. 위치와 크기만 잡는다고 보면된다. renderer가 위치와 크기를 잡으면 painting이 비동기적으로 실행된다. 실제로 그리는 부분이라고 생각하면 되고 이미 위치와 크기가 잡혀져 있기 때문에 비동기적으로 실행해도 문제가 없다. 

 

 

react 는 프레임워크가 아니라 라이브러리 이다. 

왜냐 react는 router 도 없고 데이터조작을 하지도 않기 떄문에 그저 화면을 그려주는 라이브러리라고 볼 수 있다. 

우리는 router 조작을 위해서는 react router dom 이라는 것을 따로 설치해야한다.