1. 리액트 렌더링과정

리액트 렌더링 과정

https://react-ko.dev/learn/render-and-commit

Triggering a render : 렌터링 촉발
=> 초기 렌더링 : 애플리케이션이 처음 로드 될 때
=> 상태(state) 변경 : 컴포넌트 내부 상태가 변경될 떄

Rendering the component : 컴포넌트 렌더링
1) 컴포넌트 함수를 호출하여 새로운 가상 DOM((Virtual DOM)을 생성
2) 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분을 파악
3) 재조정(Reconciliation)
React는 재조정 과정을 통해 셀제로 변경된 요소만 DOM에 업데이트 (Diffing 알고리즘 사용)
동일한 위치에 같은 React요소가 유지되면 해당 DOM 컴포넌트 상태도 유지
요소의 위치나 타입이 변경되면 DOM 요소와 상태가 파괴
"key" prop을 사용하여 요소의 식별성을 유지

Committing to the DOM : DOM에 커밋
렌더 단계에서 계산된 변경사항을 실제 DOM에 적용하는 단계
리액트는 렌더 단계에서 결정된 변경사항만을 실제 DOM에 반영
초기 렌더링의 경우, 모든 DOM 노드를 생성하여 화면에 배치
리렌더링의 경우, 필요한 최소한 DOM 조작만 수행

BROWSER PAINT : 브라우저 페인팅
리액트가 DOM 업데이트를 완료한 후, 브라우저는 이를 감지하고 화면을 다시 그림
이 과정은 "브라우저 렌더링"이라고 불리지만, 리액트 렌더링과 구분위해 "페인팅"이라고 불르기도함.