Reconciliation: 가상 DOM과 리렌더링의 관계 쉽게 알아보기 (React-Typescript)

많이들 헷갈려하는 Reconciliation, 가상 DOM, 리렌더링에 대해 쉽고 간단하고 짧게 다뤄볼 예정이다.

React 컴포넌트가 화면에 나타나기까지의 과정 (리렌더링이 아닌 마운트 과정)

1. 컴포넌트가 호출된다.
2. 컴포넌트의 state가 초기화된다. (컴포넌트 내부 로직 실행)
3. 컴포넌트가 JSX요소를 반환(return)하며, 이때 반환된 JSX 요소는 가상 DOM으로 변환된다.
4. 변환된 가상 DOM을 실제 DOM에 삽입한다. (화면에 UI가 그려지게 됨)

마운트와 첫 렌더링의 차이

1~4번의 과정이 마운트과정이고, 3~4번까지의 과정이 렌더링 과정이다.
마운트는 첫 렌더링을 포함하는 더 넓은 개념인 것.

React 컴포넌트가 리렌더링 되는 과정과 Reconciliation

1. 컴포넌트의 state가 변경된다.
2. 변경된 state를 반영하기 위해 새로운 JSX를 반환하며, 이때 반환된 새 JSX요소는 새로운 가상 DOM으로 변환된다.
3. state가 변경되기 이전의 가상 DOM과 새로 만들어진 가상 DOM을 비교하여 변경 사항을 식별하고, 그 변경 사항만을 실제 DOM에 적용한다. (화면에 UI가 업데이트 됨)

여기서 3번이 Reconciliation이다.
리액트는 Reconciliation으로 리렌더링의 성능을 최적화한다.