📚 Reference

📜 Chapter

DFS (Depth First Search)

Stack Reconciler

• Stack Reconciler
• Reconciler - 조정자
• 스택 리컨실러
• Stack Reconciler는 React의 초기 버전부터 React 15까지 사용되었던 핵심 알고리즘으로, UI의 가상 DOM(Virtual DOM)과 실제 DOM을 동기화하는 역할을 담당했다.
• 현재 React 16부터 사용되는 Fiber Reconciler의 전신이라고 보면 된다.
• 이름에서 알 수 있듯이 이 알고리즘은 JavaScript의 Call Stack 구조를 활용하여 동기적으로 작업을 처리하는 것이 특징이다.

원리

• Stack Reconciler의 이름에 'Stack'이 붙은 이유는 UI 트리를 업데이트할 때 동기적(Synchronous)이고 재귀적인 방식으로 동작하기 때문이다.
  • 재귀적 비교: 업데이트가 발생하면 React는 트리의 루트부터 시작하여 아래로 내려가며 변경 사항을 찾는다.
  • 중단 불가: 한 번 비교 프로세스가 시작되면, 전체 트리의 순회가 끝날 때까지 멈출 수 없다.
  • 콜 스택 활용: JavaScript의 표준 Call Stack을 사용하여 작업을 처리한다.

핵심 동작 원리: 재귀적 탐색

• Stack Reconciler의 가장 큰 특징은 동기적(Synchronous)이고 재귀적인 동작 방식이다.
  • Tree Traversal: 상태가 변경되면 React는 가상 DOM 트리(Virtual DOM)를 최상단부터 아래로 재귀적으로 탐색하며 변경 사항을 찾는다.
  • Deep-first Search: 한 분기를 잡으면 해당 분기의 끝까지(Leaf node) 내려가서 처리를 완료해야만 다음 분기로 넘어갈 수 있다.
  • Call Stack 점유: 이 모든 과정이 JavaScript의 실행 스택(Call Stack) 안에서 한 번에 이루어진다.

한계점: "화면 멈춤" 현상