리액트의 렌더링 과정
컴포넌트를 화면에 표시하려면 React에서 렌더링 과정을 거쳐야한다. 해당 과정을 이해하면 코드가 어떻게 실행되는지 이해할 수 있고 React 렌더링 동작에 관해 설명하는데 도움이 된다.
리액트의 렌더링 과정은 3단계로 정리할 수 있다.
트리거 단계 Trigger Phase
컴포넌트 렌더링을 일으키는 단계를 트리거 단계라고 하고, 렌더링을 일으키는 두 가지 이유는 다음과 같다.
- 컴포넌트의 초기 렌더링인 경우
- 컴포넌트의 State가 업데이트된 경우
초기 렌더링
앱을 시작할 때 Target DOM 노드와 함께 createRoot를 호출한 다음 반환된 객체의 render 메서드를 호출하면 초기 렌더링이 트리거된다.
State 업데이트 시 리렌더링
컴포넌트가 처음으로 렌더링 된 이후에는 set 함수를 통해 상태를 업데이트하여 추가적인 렌더링을 트리거할 수 있다.
컴포넌트의 상태를 업데이트하면 자동으로 렌더링 큐에 추가된다.
렌더 단계 Render Phase
React가 컴포넌트를 호출하여 화면에 표시할 내용을 파악하는 단계다.
"렌더링"은 React에서 컴포넌트를 호출하는 것
- 초기 렌더링에서 React는 루트 컴포넌트를 호출한다.
- 이후 렌더링에서 React는 State 업데이트가 일어나 렌더링을 트리거한 컴포넌트를 호출한다.
재귀적 단계
컴포넌트를 호출하고 화면에 표시할 내용을 파악하는 작업은 재귀적으로 이뤄진다.
업데이트된 컴포넌트가 다른 컴포넌트를 반환하면 React는 다음으로 해당 컴포넌트를 렌더링하고, 해당 컴포넌트도 컴포넌트를 반환하면 반환된 컴포넌트를 다음에 렌더링하는 방식이다. 이때 React는 이전 렌더링 이후 변경된 속성을 계산하는데, 다음 단계인 커밋 단계까지는 해당 정보로 아무런 작업도 수행하지 않는다.
즉 렌더 단계는 컴포넌트를 렌더링(호출)하고, 렌더링 간의 변경점을 계산하는 단계다.
커밋 단계 Commit Phase
앞에서 계산된 렌더링 간 변경점을 실제 DOM에 적용하는 단계다.
- 초기 렌더링의 경우 React는 appendChild() DOM API를 사용하여 생성한 모든 DOM 노드를 화면에 표시한다.
- 리렌더링의 경우 React는 렌더 단계에서 계산한 DOM 변경사항을 실제 DOM에 적용하여 최신 상태를 유지한다.
즉 커밋 단계에서 React는 렌더링 간에 변화가 있는 경우에만 DOM 노드를 변경한다.
에필로그: 브라우저 페인트
렌더와 커밋을 마치면, 브라우저는 Render Tree를 만들어 화면을 다시 그린다. 이 단계를 "브라우저 렌더링"이라고 부른다.
Reference
