[React] Virtual DOM이란?

📌 핵심

💡 개념

UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고, ReactDOM과 같은 라이브러리에 의해 "실제" DOM과 동기화하는 프로그래밍 개념

• 이러한 과정을 "재조정(Reconciliation)"라고 함
• 이러한 접근 방식이 React의 선언적 API를 가능하게 함

• 보통 "사용자 인터페이스를 나타내는 객체"라는 의미로 통용되기 때문에, React elements와 연관

💡 Shadow DOM !== Virtual DOM

Shadow DOM과 Virtual DOM은 다르다

• Shadow DOM : 특정 DOM 요소에 완전한 캡슐화를 적용하길 원하거나 글로벌 스타일에 영향을 받지 않기를 원하는 경우, 원래의 DOM 트리에서 완전히 분리된 고유의 요소와 스타일을 가진 DOM 트리를 분리하여 사용할 수 있는 브라우저 기술 (attachShadow() 메서드 사용)
• Virtual DOM : 브라우저 API 위에 있는 JavaScript 라이브러리에서 구현되는 개념

💡 shadow dom도 나중에 정리해 보면 재밌겠다

💡 React Fiber란?

React v16에서 등장한, React의 핵심 알고리즘을 재구성한 새 재조정(Reconciliation) 엔진

• 주요 목표는 React의 스케줄링, 즉 작업에 대한 우선순위를 지정하는 것
• 핵심 기능은 렌더링을 증분하는 것
  • 렌더링 작업을 여러 청크로 분할하여, 여러 프레임에 분산하는 기능

✅ Fiber의 구조

컴포넌트와 컴포넌트의 입력과 출력에 대한 정보를 포함하는 JavaScript 객체

1. type과 key

• type은 해당 구성 요소를 설명함
• key는 fiber를 재사용할 수 있는지 여부를 판별하기 위해 type과 함께 사용됨

2. child와 sibling

• 다른 fiber를 가리키며, fiber의 재귀적 트리 구조 설명

3. return

• 프로그램이 현재의 fiber를 처리한 후, 반환해야 하는 fiber

4. pendingProps와 memoizedProps

• 함수의 arguments
• pendingProps는 함수의 실행 시작 시에 설정되고, memoizedProps는 실행 끝에서 설정됨
• 새로 들어오는 pendingProps가 memoizedProps와 같을 때, fiber는 이전 결과를 재사용할 수 있다!

5. pendingWorkPriority

• fiber가 나타내는 작업들의 우선순위

6. alternate

① flush : fiber의 출력을 화면에 렌더링한다는 의미
② work-in-progress : 아직 완료되지 않은 fiber는 아직 반환되지 않은 stack frame과 개념적으로 같다.

• 컴포넌트 인스턴스는 언제나 최대 2개의 fiber가 대응한다 (flush와 work-in-progress)
• 현재 fiber의 alternate는 work-in-progress이고, work-in-progress의 alternate는 현재 fiber → ...????

7. output

• 함수의 반환값
• 모든 fiber는 결국 output을 가지지만, output은 호스트 컴포넌트에 의해 leaf node에서만 생성됨
• 호스트 컴포넌트 : React 앱에서 leaf nodes

💡 재조정(Reconciliation)이란?

React가 변경해야 할 부분을 결정하기 위해, 한 트리를 다른 트리와 비교할 때 사용하는 알고리즘

• React에서는 다음 2가지 가정을 기반으로 비교 알고리즘을 구현하고자 함

1. 서로 다른 타입의 두 엘리먼트는, 서로 다른 트리를 만들어낸다.
2. 개발자가 key prop을 통해 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다.

• 2개의 트리를 비교할 때, React는 두 엘리먼트의 루트 엘리먼트부터 비교하는데, 이후 동작은 루트 엘리먼트의 타입에 따라 달라짐

1. 엘리먼트의 타입이 다른 경우

• 이전 트리를 버리고 완전히 새로운 트리 구축
• 이전 DOM 노드들은 모두 파괴되고, 이전 트리와 연관된 모든 state 사라짐

2. DOM 엘리먼트의 타입이 같은 경우

• 같은 타입의 두 React DOM 엘리먼트를 비교할 때, React는 두 엘리먼트의 속성을 확인해, 동일한 내역은 유지하고 변경된 속성들만 갱신함

3. 같은 타입의 컴포넌트 엘리먼트

• 컴포넌트가 갱신되면, 인스턴스는 동일하게 유지되어서 렌더링 간 state 유지
• React는 새로운 엘리먼트 내용을 반영하기 위해 현재 컴포넌트 인스턴스의 props 갱신

📌 참고 자료

• Virtual DOM과 Internals
• 재조정(Reconciliation)
• Using shadow DOM
• Shadow DOM 사용하기
• (번역) Shadow DOM은 무엇일까?
• React Fiber Architecture

어렵다 ...