React Rendering

상태가 바뀌면 React는 새 UI를 계산하고 DOM에 반영한다

개발자는 상태와 props로 “지금 보여줄 화면”을 선언한다. React는 컴포넌트를 다시 실행해 이전 결과와 비교하고, 실제 브라우저 작업은 마지막에 모아서 처리한다.

핵심 기준

직접 DOM을 고치는 절차가 아니라, 데이터에서 화면을 다시 계산하는 모델이다.

1

상태 신호

`setState`, props 변경, 서버 데이터 갱신이 렌더링을 예약한다.

2

컴포넌트 실행

함수 컴포넌트를 호출해 다음 UI 트리를 계산한다.

3

결과 비교

이전 트리와 새 트리를 비교해 바뀐 노드와 속성을 찾는다.

4

Commit

변경 목록을 실제 DOM에 적용한다. 부수 효과도 이 단계와 연결된다.

5

브라우저 갱신

스타일 계산, 레이아웃, 페인트를 거쳐 화면이 갱신된다.

컴포넌트 단위

작은 계산 단위로 UI를 나누어 변경 범위를 추적한다.

단방향 데이터

값은 아래로 흐르고, 이벤트는 위로 알려 상태를 바꾼다.

최소 DOM 변경

Virtual DOM 자체보다 실제 DOM 작업을 줄이는 전체 흐름이 중요하다.