리엑트는 어떻게 작동될까?

리액트는 사용자 인터페이스를 구현하기 위한 자바스크립트 프레임워크이다.

리엑트는 컴포넌트 중심이다.

React는 이 컴포넌트 컨셉트를 포함하고 있다. React는 효과적으로 UI를 구성하기 위해 컴포넌트를 사용하고, 또 UI를 업데이트하기 위해 컴포넌트를 사용한다.

ReactDOM은 웹과 상호작용하기 위해 필요하다. React자체는 웹에 대한 정보, 그리고 브라우저에 대한 정보를 모른다.

React는 컴포넌트를 어떻게 다루는지 알고 있지만, 컴포넌트들이 HTML 요소들을 가지고 있는지 아닌지에 대해서는 신경쓰지 않는다.

React는 컴포넌트들과 state들, 그리고 컴포넌트들이 어떻게 바뀌어야하는지, 그리고 전의 컴포넌트 state와 현제 컴포넌트 state 차이가 무엇인지를 관리한다.

React가 핵심적으로 신경쓰는 것은 3가지 이다.

1. Props: 부모 컴포넌트로 부터 온 데이터
2. State: 내부 데이터
3. Context: Component-wide 데이터

props나 state나 context가 바뀌면 이 컨셉트를 사용하는 컴포넌트들은 React에 의해 업데이트 되고, React는 이 컴포넌트가 새로운 것을 스크린에 표시하고싶은지 아닌지 체크를 하고, 만약 새로운 것을 스크린에 표시하고 싶으면 React는 ReactDOM이 새로운 것을 화면에 표시할 수 있도록 알린다.

React는 컴포넌트들에게만 신경쓴다고 앞에서 말했다. 그러면 사용자가 볼 수 있는 real DOM과 어떻게 소통할까?

React는 virtual DOM이라는 컨셉트를 사용한다.

React는 컴포넌트 트리의 구조를 결정하고 ReactDOM은 state 업데이트 전의 컴포넌트 트리와 업데이트 후의 컴포넌트 트리를 비교후 real DOM을 조작한다.

ReactDOM은 궁극적으로 진짜 HTML 요소들을 스크린에 표시하기위해 필요하다.

ReactDOM은 브라우저의 한 부분인 real DOM과의 일을 책임지고 있다. 그래서 ReactDOM은 사용자가 볼 수 있게 컴포넌트들을 스크린에 띄우는데에 책임이 있다.

Re-evaluating Component가 re-rendering the DOM을 의미하는 것은 아니다.

props나 state나 context가 바뀌면 이 것을 사용하고 있는 컴포넌트들은 다시 평가된다.그리고 React는 컴포넌트 함수를 재실행한다.

하지만 RealDOM은 이 평가가 달라졌을때만 바뀐다.

따라서 RealDOM은 드물게, 필요할 때만 바뀐다.

이는 성능에 굉장히 많이 영향을 미친다.

왜냐하면 가상으로 현재 state와 전의 state를 비교하는 것이 훨신 쉽고 싸게먹히기 때문이다. 이 작업은 메모리에서만 일어난다.

이와 다르게 브라우저에 렌더링된 real DOM은 성능관점에서 꽤 비싸다. 왜냐하면 real DOM을 활용하는 것은 굉장히 성능을 많이 사용한다.

만약 작은 변화를 많은 부분에서 자주 일으키면, DOM을 너무 많이 변경하기 때문에 페이지는 느려질 것이다.

이게 바로 React가 virtual DOM을 가지고 가상으로 비교를 하고, 가장 마지막의 snapshot과 current snapshot을 비교해 real DOM에 반영시키는 이유이다.

코드로 예를 들어보면

이게 마지막으로 평가되고 실행된 이전의 스냅샷이고

<div>
  <h1>
    Hi there!
  </h1>
</div>

어떤 State가 바뀌어서

<div>
  <h1>
    Hi there!
  </h1>
  <p>
    This is new!
  </p>
</div>

새로 평가된 결과(스냅샷)가 있다고 하자.

이때 React는 두 스냅샷 사이의 차이는

This is new!

그리고 이것을 ReactDOM에게 알려 real DOM을 업데이트 할 수 있게 할 것이다. ReactDOM은 전체 DOM을 렌더링하지 않고