[React] Virtual DOM and Rendering

 

 

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정(Reconciliation)이라고 합니다 -React 공식 문서(Virtual DOM과 Internals)-

React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. -React 공식 문서(엘리먼트 랜더링)-

virtual DOM은 브라우저 API 위에 있는 JavaScript 라이브러리에서 구현되는 개념이다. Virtual DOM은 실제 DOM의 구조와 비슷한, React 객체 트리이다. 우리는 이러한 Virtual DOM을 제어하고, React에서는 이를 실제 DOM에 반영하는 작업을 하게 된다.

리액트 객체 트라라는 점을 다시 생각해보면 JSX에 대한 이해를 더할 수 있다. 실제로 JSX를 Babel에서 변환을 시켜보면 React Element 객체로 변환되는 것을 확인할 수 있다.

function Hello({toWhat}) {
  return <div>Hello {toWhat}</div>;
}

ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

function Hello({
  toWhat
}) {
  return /*#__PURE__*/React.createElement("div", null, "Hello ", toWhat);
}

ReactDOM.render( /*#__PURE__*/React.createElement(Hello, {
  toWhat: "World"
}), document.getElementById('root'));

 

진행 과정

그림이 귀엽다

1. render를 trigger
2. component를 render
3. DOM에게 commit

 

1. render를 trigger

render가 일어나게 하는 상황은 두가지가 있다

1. 초기 render
2. component의 state update

app이 동작하면 초기 render가 일어나야 한다. 이를 관장하는 것은 바로 ReactDOM.render이다. 흔히 가장 상위 파일 index.js에서 ReactDOM.render관련 코드를 봐왔을 것이다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

여기서 render가 Virtual DOM을 만들고 관리하는 친구였다…!

사실 React 처음 공부했을때 보고 처음 다시 생각해보았다. 그냥 root에 연결해주는거라고 생각만 해왔는데!!!

이렇게 초기 랜더링이 일어나고 난 후, set~함수에 의해 state 변화가 일어나게 된다. 이러한 state 변화는 render를 일어나게 한다(처음에 음식을 시키고 시키고 커피, 디저트 등을 더 시키는 레스토랑 손님을 상상해보자)

 

2. component를 render

render를 trigger한 후 React는 컴포넌트에게 화면에 나올 것을 내놓으라고 한다. 사실 Rendering은 React가 컴포넌트를 call하는 것이다. 초기 render에서는 root componen를 call하고, 이후 일어나는 render에서는 render가 일어나게 한 컴포넌트(state가 없데이트 된 컴포넌트)를 call하게 된다. 이러한 과정은 재귀적으로 일어난다. 만약 업데이트 된 컴포넌트가 다른 컴포넌트를 return한다면 React는 그 컴포넌트(return한 컴포넌트)를 render한다. 이러한 과정은 더이상 연결된 컴포넌트가 없을때까지 반복된다.

초기 render시에 React는 createElement를 통해 모든 태그들을 생성한다. 이후 re-render시에는 이들 중 무엇이 변했는지를 계산한다(계산까지만 한다. 이후 과정은 다음 스탭에서 진행하게 된다)

 

3. DOM에게 commit

컴포넌트를 render(call)한 이후에 React는 DOM은 변경한다.

초기에는 appendChild()를 통해 DOM에다가 집어 넣는다. re-render시에는 render과정에서 계산된 것과 DOM이 일치할 수 있도록 최소화된 연산을 진행하게 된다. React는 render간의 차이가 있을 때만 DOM 노드를 변경한다

 

Virtual DOM 갱신 과정을 한눈에 알아보기 좋은 이미지

 

 

 

참고

---

https://ko.reactjs.org/docs/faq-internals.html

https://beta.reactjs.org/learn/render-and-commit

https://d2.naver.com/helloworld/9297403

https://www.youtube.com/watch?v=PN_WmsgbQCo

https://www.youtube.com/watch?v=BYbgopx44vo