• React v16ㅇ체서 리액트의 핵심 알고리즘을 재구성한 새 재조정(Reconcilation) 엔진
• React Fiber의 목표는 애니메이션, 레이아웃, 제스처, 중단 또는 재사용 기능과 같은 영역에 대한 적합성을 높이고 다양한 유형의 업데이트에 우선 순위를 지정하는 것이다
• 핵심 기능은 렌더링을 증분하는 것이다
  • 렌더링 작업을 여러 덩어리로 나누어 여러 프레임에 분산하는 기능이다
  1. 중단 가능한 작업을 덩어리로 나누기
  2. 진행 중인 작업의 우선 순위를 지정하고, 리베이스하고 재사용
  3. 리액트의 레이아웃을 지원하기 위해 부모와 자식 간에 yield back and forth
  4. render()로부터 다수 엘리먼트들을 반환
  5. 에러 바운더리에 대한 더 나은 지원

Virtual DOM

• Virtual DOM은 Real DOM의 in-memory 표현이다.
• UI 표현은 메모리에 저장며 Real DOM과 동기화된다
• 이는 호출되는 렌더 함수에서 화면에 표시되는 요소가 되는 사이에 발생한 단계이다.
• 이러한 전체 과정을 재조정(Reconcilation)이라 한다.
• Virtual DOM은 특정 기술이라기보다는 패턴에 가깝다
  • React에서는 Virtual DOM이란 UI를 나타내는 객체로 통용되며, React elements와 연관 된다.
• React는 컴포넌트 트리에 대한 추가 정보를 포함하기 위해 fibers라는 내부 객체를 사용한다
• Virtual DOM은 브라우저 API 위에 있는 Javascript 라이브러리에서 구현되는 개념이다

Reconcilation

• React가 변경해야 할 부분을 결정하기 위해 한 트리를 다른 트리와 비교하는 데 사용하는 알고리즘
• React API의 핵심 아이디어는 업데이트를 통해 전체 앱을 다시 렌더링하도록 생각하는 것
• 이를 통해 개발자는 앱을 특정 상태에서 다른 상태(A에서 B로, B에서 C로, C에서 A로)로 효율적으로 전환하는 방법에 대해서는 걱정하지 않고, 선언적으로 개발할 수 있다.
• 하지만 각 변경사항마다 전체 앱을 다시 렌더링하면 성능이 좋지 않다.
• 리액트는 이를 해결하기 위해 뛰어난 성능을 유지하면서 전체 앱을 리렌더링할 수 있는 최적화 방법을 고안했다
• 이러한 최적화 방법들은 재조정(Reconciliation)이라고 불리는 과정의 일부이다.
• 재조정은 Virtual DOM으로 널리 이해되고 있는 것 뒤에 있는 알고리즘이다
  1. 리액트 애플리케이션을 렌더링하면 앱을 묘사하는 노드의 트리가 생성되어 메모리에 저장된다
  2. 그 다음 이 트리는 렌더링 환경으로 전달된다 - 브라우저 환경이라면 이 트리는 일련의 DOM 조작으로 변환된다
  3. 앱이 setState 등을 통해 업데이트 되면, 새 트리가 생성된다
  4. 새 트리는 렌더링된 앱을 업데이트 하는 데 필요한 작업을 계산하기 위해 이전의 트리와 구분된다.(diff)
• 알고리즘의 요점
  • 컴포넌트 type이 다르면, 실질적으로 다른 트리를 생성한다고 가정한다
    • 따라서 리액트는 이를 구분(diff)하려고 하지 않고, 대신에 이전의 트리를 완전히 교체한다
  • 목록은 key를 통해 구분(diff)된다. 따라서 key는 ‘안정적이고, 예측 가능하고, 유니크해야 한다.’