[React] 17. 리액트가 작동하는 방식 : React, ReactDOM, VirtualDOM

안녕하세요. 박기린입니다.

이번엔 React가 실제로 웹 브라우저에 페이지를 표시하는 방법에 대해 알아보겠습니다.

 

 

---

React vs ReactDOM

리액트(React) 자체는 웹에 대해 모릅니다. 웹페이자 상에서 어떻게 표시되는 지에 대해서 관여하지 않습니다.

리액트는 컴포넌트, State, Context, Props 같은 정보들을 관리하고, 이것들을 HTML 요소로 출력하는 역할은 ReactDOM이 담당합니다.

리액트는 컴포넌트나 State의 변경된 내용과 화면에 표시되어야 할 정보 모두를 ReactDOM으로 전달합니다. 그러면 ReactDOM은 실제로 웹브라우저에 출력될 DOM을 수정합니다. 유저가 보고 있는 웹 화면에 무언가를 표시하는 역할은 전적으로 ReactDOM의 몫입니다.

 

 

 

 

---

리액트 컴포넌트와 실제 DOM의 통신 방법 - Virtual DOM

리액트는 컴포넌트를 다룰 때, 가상 DOM을 사용합니다. (참고 자료 : https://www.codecademy.com/article/react-virtual-dom)

가상 DOM(VDOM, Virtual DOM)은 리액트 앱이 최종적으로 만들어내는 컴포넌트 트리를 담습니다.

리액트 컴포넌트들은 JSX 코드를 return합니다. 리액트는  이 JSX 코드 뭉치들을 가지고 컴포넌트 트리를 구성하고, 가상 DOM에 컴포넌트 트리의 현재 모양과 최종 모양을 담습니다.

 

만약, 리액트에 의해 state가 업데이트 되면, 가상 DOM에 의해 컴포넌트 트리가 재구성 및 결정되고, 이 트리가 ReactDOM으로 전달됩니다. 리액트 DOM은 지금 웹브라우저에 출력되고 있는 DOM 내부의 컴포넌트 트리와 비교를 합니다. 그리고 두 트리 간의 차이점을 발견합니다. 차이점에 따라, [리액트가 컴포넌트 트리를 통해 구성한 가상 DOM]과 일치하도록 [실제 DOM]을 수정, 조작합니다.

 

리액트가 가상 DOM을 만들어서 ReactDOM에 전달 -> ReactDOM은 가상 DOM과 실제 DOM을 비교한 후, 실제 DOM을 수정.

 

 

 

 

---

효율적으로 작동하는 ReactDOM

state, props, context, 컴포넌트가 변경되면, 컴포넌트 함수가 재실행되어서 리액트가 재평가(re-evaluating)를 합니다.

하지만, 이 재평가가 'DOM을 다시 렌더링(re-rendering)'한다는 뜻은 아닙니다.

 

변경사항이 생겨서 리액트가 재평가를 하면, ReactDOM은 리액트로부터 state나 컴포넌트 트리 등 여러 변경사항이 포함된 가상 DOM을 받습니다. 이걸 웹 브라우저에 출력 중인 실제 DOM과 비교합니다. 그리고 이 둘 간의 차이점을 기반으로, 변경이 필요한 부분만 업데이트 합니다.

 

실제 DOM 전체를 매번 재렌더링하는 것보다, 가상으로 비교한 후 필요한 경우에만 국소적으로 수정하는 것은 성능 측면에서 좋습니다. 매우 간편하고 자원이 적게 드는 방식입니다. 브라우저에 DOM을 자주 렌더링하게 하면 많은 자원이 사용되고 성능 부하가 발생합니다. 그러면 페이지가 느려지게 됩니다.

 

 

 

실제 예시

위 코드의 경우, ReactDOM은 실제 DOM 전체를 재렌더링하지 않습니다. <div> <h1>은 건드리지 않고, <div> 안에 <h1> 의 위치를 찾은 다음, 그 밑에 <p> 문장만 간단히 추가하고 끝냅니다.

 

그래서 <div> <h1>이 다시 렌더링되는 일 없이 간단하게 수술을 마칩니다.