리액트 가상돔과 실제 dom에 업데이트되는 과정

리액트는 뷰를 어떻게 렌더링하길래 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고 최적의 유저 경험을 제공 할 수 있을까요??

 

리액트에서는 초기랜더링을 다루는 랜더함수 render() 가 있다.

 

이 함수는 단순히 html을 반환하는 것이 아닌

뷰가 어떻게 생겼고 어떻게 작동하는지 정보를 지닌 객체를 반환한다.

 

랜더 함수가 실행되면

내부에있는 컴포넌트들도 재귀적으로 랜더링한다. 최상위 컴포넌트의 렌더링 작업이 이끝나면

지니고 있는 정보들을 html 마크업을 만들고 이를 우리가 정하는 실제 페이지의 dom요소 안에 주입합니다.

 

 

 

조화 과정

 

컴포넌트에서는 데이터 변화에 따라 뷰가 변형되는 것이 아닌 새로운 요소로 갈아 끼우는 것

 

이작업 또한 render() 함수가 한다.  . . . . 

컴포넌트는 데이터를 업데이트햇을 때 단순히 업데이트한 값을 화면에서 수정하는 것이 아니라

 

새로운 데이터를 가지고 render함수를 다시 호출한다. 그러면 그 데이터를 가지고 뷰를 만들겠네~ 

이때 결과를 바로 dom에 주입하지 않고 

랜더함수가

이전에 랜더함수가 만들었던 컴포넌트와 현재 랜더함수가 만든 컴포넌트 정보를 비교한다. 

자바스크립트를 사용하여 두 가지 뷰를 최사한의 연산으로 비교한 후 둘의 차이를 알아내 최소한의 연산으로 dom트리를 업데이트하는것

 

 

돔이란 

 DOM은 웹 페이지의 모든 요소를 객체로 변환하여 프로그래밍 언어에서 이를 조작할 수 있게 해줍니다. 이 객체들은 문서의 계층 구조를 반영하며, 각 요소의 속성과 내용을 쉽게 접근하고 조작할 수 있습니다.

DOM은 웹 페이지를 동적으로 제어하는 데 필수적인 기술로, 자바스크립트를 이용해 웹 페이지를 조작할 때 많이 사용됩니다. 예를 들어, 버튼을 클릭하면 특정 요소의 색상을 변경하거나, 새로운 요소를 추가하거나, 요소의 위치를 이동시키는 등 다양한 동적인 효과를 구현할 수 있습니다.

 

가상돔이란?

변경된 데이터가 반영된  dom 사본

 

리액트에서 실제 dom에 업데이트 할때 3가지 절차

데이터를 업데이트하면 전체ui를 가상돔에 리렌더링

가상돔 있던 내용과 현재 내용을 비교

바뀐 부분을 실제 dom에 적용

 

 

가상돔을 사용한다고 무조건적으로 빠르지 않음. . . . . .

지속적으로 데이터가 변화하는 대규모 어플리케이션

결국 적절한곳에서 사용해야지 진가를 발휘함.

 

리액트와 가상돔이 언제나 제공할수 잇는 것은 바로 업데이터 처리의 간결성 

ui를 업데이트하는 과정에서 생기는 복작함을 모두 해소하고 더욱 쉽게 업데이트에 접근할 수 있다.