[스터디 with 실전 리액트 프로그래밍] 10편 - 가상돔

실전 리액트 프로그래밍

 

리액트 요소

 

리액트 요소는 리액트가 UI를 표현하는 수단이다.

JSX 문법에는 리액트 요소가 겉으로 나타나지 않지만, 이 요소를 이해하면 리액트가 내부적으로 어떻게 동작하는지 알 수 있다.

 

 

JSX 문법으로 작성된 코드는 리액트의 createElement 함수로 변경된다.

createElement 함수는 리액트 요소를 반환한다.

따라서 컴포넌트 함수는 리액트 요소를 반환한다.

 

// JSX
const element = <a href="https://www.google.com">Google</a>


// createElement
const element = React.createElement(
  'a',
  { href: "https://www.google.com" },
  'Google',
 }
 
 
// 리액트 요소
const element = {
  type: 'a',
  key: null,
  ref: null,
  props: {
    href: "https://www.google.com",
    children: 'Google',
  },
  // ...
}

 

JSX와 이것이 변경된 createElement, 이 함수가 반환하는 리액트 요소다.

위 리액트 요소에서 type은 문자열 'a'인데 만약 element가 리액트 컴포넌트라면 type이 함수가 된다.

그리고 key와 ref는 props에 들어 있지 않다.

때문에 컴포넌트에서 props를 전달할 때 key나 ref속성은 전달되지 않는다.

 

 

 

 

가상돔(Virtual DOM)

 

하나의 화면에는 여러 개의 리액트 요소가 트리 구조로 구성되어 있다.

 

// JSX
const element = (
  <div>
    <SampleComponent />
  </div>

 
// 리액트 요소
const element = {
  type: 'div',
  props: {
    children: {
      type: SampleComponent,
      // ...
  },
  // ...
}

 

 

트리 구조로 되어 있는 모습이다.

 

 

 

이 리액트 요소 트리가 실제 돔으로 만들어 지려면 모든 리액트 요소의 type 값이 문자열이어야 된다.

그래야 모든 요소가 HTML 태그로 전환이 가능해진다.

즉 위의 SampleComponent도 호출되어 적절하게 변경되어야 한다.

 

모든 리액트 요소의 type 값이 문자열이 되었다면, 실제 돔을 만들 수 있다.

이와 같이 실제 돔을 만들 수 있는 리액트 요소 트리를 가상돔이라고 한다.

 

 

리액트에서 화면 업데이트는 렌더 단계와 커밋 단계를 거친다.

렌더 단계는 실제 돔에 반영할 변경 사항을 파악하는 단계이고,

커밋 단계는 변경 사항을 실제 돔에 반영하는 단계이다.

 

렌더 단계에서 변경 사항을 파악하는데 이 가상돔이 이용된다.

이전 가상돔과 현재 가상돔을 비교함으로써 실제 돔에 반영할 내용을 결정한다.

 

 

렌더 단계를 시작하는 방법은 두가지가 있다.

ReactDom.render을 호출하거나,

useState의 변경 함수로 상탯값을 변경함으로써 함수 컴포넌트를 호출하면 렌더 단계가 시작된다.

 

 

브라우저에서 돔을 변경하는 작업은 오래 걸린다.

따라서 리액트는 가상돔을 이용해 돔 전체를 업데이트 하는 것이 아니라 필요한 부분만 업데이트해줌으로써 시간을 단축시킨다.