1. Trigger(state)
2. Render
3. Commit
1 단계. 렌더 Trigger
두가지 케이스 존재
•
컴포넌트의 첫 렌더
•
컴포넌트 또는 조상 컴포넌트의 state 업데이트
2단계. Render
•
리액트가 vdom 상의 컴포넌트를 렌더
•
재귀적으로 리렌더 해야하는 모든 컴포넌트를 리렌더
◦
조상이 되었으면 자식들 까지
•
변동사항 감지 시 변동 사항을 저장 후 Commit 단계 까지 대기
3단계. Commit
•
React가 변동사항을 DOM에 적용하는 단계
◦
이 단계에서 리액트는 실제 DOM과 VDOM을 비교해 바뀐 사항이 있을때만 DOM을 변동 함
•
첫 렌더 시 → DOM API(appendChild)를 이용해 DOM 노드를 전부 그림
•
리 렌더 시 → 최소한의 업데이트를 수행
4 단계. 브라우저의 painting
•
브라우저가 실제로 화면에 painting하는 단계