[react] render 함수 와 가상돔에 대하여

- 리액트 컴포넌트에서 렌더함수 안의 jsx 는 실제 Dom 을 조작하는 것이 아니라 가상의 Dom 을 조작하는 것이다.

 

- render() 의 결과는 실제dom 을 의미하지 않고 그형태를 본딴 자바스크립트 객체를 반환한다.

(그 객체는 가독성이 떨어져서 그러한 점을 보완하기 위해서 jsx 문법을 사용한다.)

 

실제dom 이란?

실제돔은 html을 파싱한 결과를 이야기한다. 이는 html 을 javascript객체의 형태로 표현한 결과물을 이야기하며 이러한 dom 들을 트리형식으로 모아놓은것을 dom tree 라고 한다. > dom 트리는 결국 html 을 javascript 와 연결시키기 위해 만든거다

 

가상dom이 없다면 ?

실제 dom은 브라우저에서 html 을 파싱한 결과물 이고 이후에 css 파일 과 attachment 된 이후에 렌더트리형태로 변환되고 이후에 layout(배치작업) 과 페인트 작업이 추가적으로 이뤄진다. 이러한 일련의 과정을 reflow 라고 하는데 

이러한 reflow 작업은 dom이 변경될때마다 작동하게 된다 그래서 만약 어떠한 동작에 의해 5개의 요소가 변경이 되면 이러한 작업(reflow)이 5번 반복되게 되고 이부분에서 비효율성을 개선하기 위해서 가상dom개념 을 사용한다.

 

그래서 가상dom이 하는일은?

리액트 컴포넌트에서 render()의 결과는 실제dom을 조작하지 않고 가상dom을 조작한다. 그리고 변경사항여부를 파악하여 5개의 변경사항이 누적된 가상dom을 적용해줌으로써 reflow 과정자체를 1번만 수행할수 있게된다.

 

정리

리액트는 개념적으로 변화점을 잡아내는 단위를 변경시킴으로써 효율성의 증대를 불러일으켰다.

기존의 변화점을 dom 요소의 변경을 기준으로 삼았다면 리액트는 일종의 메모이제이션 개념을 이용해 컴포넌트 단위의 변경을 하나의 변화점으로 사용해 reflow 과정의 비효율성을 줄여줬다.

reflow(dom요소의 조작으로 일어나는 일련의 행위) > rerender(컴포넌트의 조작으로 일어나는 일련의 행위)

 

https://medium.com/@i01029407043/react%EC%99%80-virtual-dom-97842b09b034

React와 Virtual DOM

감사합니다~