들어가며 React, ReactDOM

React와 ReactDOM에 대해 간단하게 살핀 후, 어떻게 ReactDOM에 상태 변화에 따른 변화가 반영되는지 살펴보도록 하겠습니다.

React

• 리액트는 기본적으로 컴포넌트를 통해 유저 인터페이스를 만듭니다. 리액트는 컴포넌트 컨셉트를 권장하고 있습니다. (컴포넌트를 통해 효과적인 유저 인터페이스를 설계할 수 있도록 권장하고 있습니다.)

⚠️ React 는 컴포넌트와 상태를 관리합니다.

• 컴포넌트 별 다른 상태를 관리합니다.
• 컴포넌트가 내 상태를 기반으로 어떻게 변화해야하는 지를 감지하여 관리됩나다.
• 리액트는 변화 감지를 통해서 어떤 것이 시각적으로 드러나야하는지를 관리합니다.
  → 어떤 Screen을 사용해야하는지에 대해서는 영향을 받지 않습니다.
  

React Components의 상태 구성 요소
1. context : 컴포넌트 전체 데이터
2. props : 부모 컴포넌트로부터 받은 데이터
3. state : 내부 데이터

React는 React DOM을 통해 이러한 데이터 상태를 기반으로 스크린을 띄우게 됩니다.

React는 어떻게 동작하는가?

1. React는 현재 보이는 모습, 상태 업데이트 후 보여야하는 모습을 결정합니다.
   — 이 컨셉은 가상 DOM이라고 불리며, 웹을 빌딩하는데 필요한 컴포넌트 트리를 구축합니다.
   — 모든 컴포넌트는 JSX Code 라고 불리는 서브트리를 반환합니다.
2. ReactDOM 은 React 에 대한 변경상황에 대한 정보를 받아서 실제 DOM을 조작합니다.
   — 가상 DOM과 매칭하여, 리액트 가상 스냅샷을 기반으로 한 비교를 통해 다시 컴포넌트 트리를 그린다.

⚠️ 리액트는 컴포넌트 함수를 반환해야한다.

• 이를 통해 컴포넌트가 재평가
• 매번 상태 state, prop, context가 바뀔때마다 함수는 재 실행된다.

React DOM

리액트 DOM은 웹을 위한 인터페이스입니다. REAL element를 현실 세계에 가져오는 용도로 사용됩니다. Screen에 무언가를 띄어주고자하는 책임을 가지고 있습니다.

재평가와 재랜더링 차이 (Re-Evaluating component ≠ Re-rendering the DOM)

컴포넌트 함수는 리액트에 의해 재호출(re-execute)됩니다. 하지만, 재호출되는 것이 항상 실제 돔에 재랜더링(re-render) 된다는 것을 의미하는 것은 아닙니다. 리액트는 이전 상태 기반의 컴포넌트의 트리구조와 현재 상태 컴포넌트 트리구조를 비교를 기반으로 합니다.

Real DOM을 필요할때만 변화합니다. 이는 퍼포먼스 측면을 위함이며, 가상 변화에 대한 비교를 (virtual comparison)를 선행한 후에 실제로 변화가 필요한 경우에만 Real DOM에 변화 이를 반영합니다.

1. 이전 상태와 현재 상태를 비교한다.
   • 간단하고, 비용이 낮은 퍼포먼스 동작
   • 메모리 안에서만 발생한다.
2. Real Dom에 직접 접근하여 브라우저에 렌더링한다.
   • 비용이 높은 퍼포먼스 방식의 동작이다.
   • 모든 공간에 작은 변화가 생길때마다 랜더링을 한다면, 페이지를 랜더링을 잦은 발생으로 인해 속도가 저하된다. Real DOM에 대한 동작을 최소화하는 것이 좋다.

리액트는 현재 스냅샷과 마지막 스냅샷 기준의 변화만을 Real DOM 전달하여 렌더링하는 방식을 사용하고 있다. 이를 Virtual DOM Diffing이라고 호칭합니다.

Virtual DOM Diffing란?

• 두 상태에 대한 스냅샷을 비교합니다.
  1. 이전 상태
     : 컴포넌트 함수가 마지막에 호출에 인한 평가 결과
  2. 현재 상태
     : 컴포넌트 함수가 현재 호출로 인한 평가 결과

두 스냅샷에 대한 비교를 통해서 ReactDOM에 변화에 대한 리포트를 보내게 됩니다. ReacDOM은 이를 기반으로 실제 DOM를 업데이트합니다. 이때, 모든 DOM을 업데이트하는 것이 아니며, 스냅샷에 의해 변화된 부분만 업데이트하게 됩니다.

리액트에서 관리하는 Components 별 State

State는 리액트의 핵심 컨셉중 하나입니다. 리액트의 모든 상태는 위에서 아래로 흐릅니다. 상태를 기반으로 컴포넌트가 랜더링되며 이를 화면에 노출합니다.

• 리액트는 보이지 않는 화면 뒤에서 상태에 대한 새로운 변수를 생성합니다.

이것은 useState 를 통해 묶이며, 컴포넌트에서 관리하고 있는 상태가 초기화되지 않도록 돕습니다. 컴포넌트가 가져야하는 상태에 대한 커넥션을 제공해주는 역할을 수행합니다. 리액트에서 useState를 기저로하는 관리 시스템을 아래와 같은 사항들이 고려되고 있습니다

• App 컴포넌트가 처음으로 실행될 때 useState 가 구동됩니다.
  • 이 때 새로운 상태 변수가 생성됩니다.
  • 이 변수는 리액트에 의해서 관리됩니다.
• useState에서 사용되는 상태는 컴포넌트 당 한번만 생성됩니다.
  • 컴포넌트가 재호출된다고 하여 새로운 useState를 통한 상태과 컴포넌트 바인딩이 끊기지 않습니다.
• 리액트는 기본적으로 memorized합니다.
  • 어떤 컴포넌트가 앱의 어떤 컴포넌트에 속해 있는지 기억합니다.
  • 상태를 초기화 하기 위한 state를 useState값으로 관리합니다.

⚠️ 상태 값은 초기화 되지 않습니다.
— 리액트에서 상태 초기화는 해당 컴포넌트를 DOM에서 제거하도록 동작하게 됩니다.
상태 값 초기화 방지는 app 내부의 컴포넌트 함수들이 재호출 되고, 앱에서 재 평가를 할때의 차후 대처를 위해서입니다. useState 를 통해서 새로운 변수를 생성하여 이를 메모해두어 재 평가시에 상태를 잃어버리지 않도록 합니다.

---

Reference

https://github.com/academind/react-complete-guide-code/blob/12-a-look-behind-the-scenes/slides/slides.pdf