재조정(Reconciliation)
재조정이란 리액트가 UI를 업데이트하는 전체적인 과정을 의미합니다. 구식의 React에서는 이 과정이 스택 알고리즘을 이용한 동기식 아키텍처였다면, 리액트 16부터 Fiber 아키텍처를 채택해 비동기식으로 진행되며 우선순위를 결정할 수 있고 작업을 도중에 취소할 수 있게 되어 효율적이고 매끄러운 UI를 선보일 수 있게 되었습니다.
React Fiber란?
React Fiber라는 개념이 다소 어려운데 결국 객체입니다. 어떤 객체인가? UI에 대한 정보를 담고 있는 객체입니다. 이 객체는 각 컴포넌트의 상태와 속성을 포함하며, 리액트는 컴포넌트가 실행될 때 fiber node를 생성해 메모리에 저장합니다. 리렌더링 될 때마다 기존 Fiber Node와 새롭게 생성한 fiber Node의 속성과 값을 비교해 바뀐 부분만 실제 DOM에 적용합니다. 이 과정이 앞서 설명한 재조정(Reconciliation)입니다.
리액트가 UI를 업데이트하는 과정
1. 렌더링 과정
새로운 가상 DOM을 생성하고, 이전 가상 DOM과 비교하여 어떤 부분이 변경되었는지를 판단하는 과정이 포함됩니다. 이 과정에서 리액트는 상태나 속성의 변화를 반영하여 새로운 가상 DOM 트리를 생성합니다. 이때, 리액트는 각 컴포넌트의 키(key)를 기반으로 효율적으로 비교를 수행합니다.
2. 커밋 과정
재조정의 결과로 실제 DOM에 변경 사항을 적용하는 단계입니다. 변경된 부분만을 업데이트하여 사용자에게 새로운 UI를 제공합니다. 이 과정에서는 DOM 조작이 이루어지며, 사용자의 인터페이스가 업데이트됩니다.
😎 결론
렌더링 과정에서 리액트는 이전 가상 DOM과 비교하여 어떤 부분이 변경되었는지를 판단한다고 했습니다. 만약 이 때 바뀐 부분이 없다면 커밋 과정은 생략되고 실제 렌더링은 발생하지 않습니다. 만약 리액트가 이러한 과정을 거치지 않았다면, 기존의 방법에서는 렌더 트리가 다시 생성되고 불필요한 리플로우(reflow)나 리페인트(repaint)가 발생했을 것입니다. 이러한 최적화가 리액트의 핵심이라고 할 수 있습니다.
