React Reconciliation 심화 이해를 바탕으로 리액트 잘 활용하기
·
Develop/Frontend
리액트의 Reconciliation은 UI를 업데이트 할 때, 리액트가 실제 DOM을 효율적으로 업데이트 하는 핵심 알고리즘입니다.리액트를 공부하다보면 리액트의 파이버 아키텍쳐, Virtual DOM을 들어보셨을텐데요. Fiber Architecuture는 리액트16에 도입되어 Reconcilation 엔진을 재구성하여 탄생했고, Vitrual DOM은 Reconciliation 과정을 위해 필요한 재료입니다. 아주 간략히 Reconciliation 과정을 설명하면 아래와 같습니다. 1. 실제 DOM을 복사해둔 형태인 Virtual DOM을 유지한다.2. 변경 사항이 생기면 Diffing 알고리즘을 통해 이전 Virtual DOM 트리와 새로운 Virtual DOM 트리를 비교한다.3. 비교 과정 후 ..