리액트의 렌더단계(render phase)와 커밋단계(commit phase)란 뭘까?
트리거 단계
- 컴포넌트가 그려지기 위해서 필요한 '트리거'
- 트리거단계는 초기렌더링과 리렌더로 나누어진다.
렌더 단계
-
렌더가 "트리거" 되면, 렌더 단계로 넘어가 DOM 에 그려질 요소들을 파악하는 과정을 거친다.
-
이 역시 초기렌더와 리렌더로 구분 가능
-
초기렌더 : render() 메서드의 루트컴포넌트 호출
-
리렌더 : 상태 업데이트가 발생한 컴포넌트 호출
1. 렌더단계 - 초기 렌더
- 초기 렌더에서는 브라우저가 엔트리 파일을 읽으며, 루트 요소부터 파악함
2. 렌더단계 - 리렌더
- 리렌더에서 렌더 단계는 이전에 생성한 가상 DOM 트리와 새로 만든 가상 DOM 트리를 비교하여 실제 DOM 에 반영할 사항들을 파악
- 최소한의 변경사항만 파악하기 위해, 상태 업데이트가 발생한 컴포넌트를 호출하고 새로운 가상 DOM 트리를 만듦.
- 리액트가 이전 렌더와 다음 렌더의 변화를 비교하는 과정을 '재조정'이라고 말함
- 리렌더가 발생하면 리액트는 렌더 간 어떤 요소와 속성들이 변했는지 파악하고, 이 정보를 커밋단계에 사용
커밋 단계
-
직전 렌더단계에서 두 가상 DOM 트리간의 변화를 실제 DOM에 적용하는 단계
-
이 역시 초기렌더와 리렌더에 다르게 동작
-
초기렌더: 커밋단계는 렌더단계에서 파악한 DOM 노드를 그대로 DOM에 반영
-
리렌더: 커밋단계는 렌더간 발생한 최소한의 변경사항을 DOM 에 반영