React의 렌더링 과정(Render Phase 와 Commit Phase)

이전 글에서 알아봤던 기초적인 브라우저 렌더링 과정을 넘어 React의 렌더링 과정도 같이 살펴보자.

 

1. React의 탄생  배경 : JavaScript의 성능 개선

React가 등장한 이유 중 하나는 JavaScript로 DOM을 동적 생성하거나 수정을 할 때 발생하는 Reflow와 Repaint는 비용이 많이 듦으로 과정을 최소화하기 위해서이다. React는 이런 문제를 해결하기 위해 Virtual DOM 개념을 도입하고, 업데이트 과정을 효율적으로 처리한다.

 

DOM 업데이트 최적화

아래 코드 예제를 통해 잘못된 코드와 최적화된 코드의 성능 차이를 확인해 보자.

• 잘못된 코드 예시
  • 3,000번 DOM을 생성
  • 성능 측정 결과: 3,092ms

 

• 좋은 코드 예시
  • DOM은 딱 한 번만 생성
  • 성능 측정 결과: 3.5ms (약 883배 개선)

React는 이처럼 불필요한 DOM 업데이트를 방지하는 최적화 원리를 기반으로 동작한다.

---

2. 리액트의 렌더링 프로세스

위 예제처럼 동시에 발생한 업데이트를 모아 한번에 수정을 하면 좋지만 서비스의 규모가 커질수록 점점 어려워진다. 이를 개선하기 위해 React는 자동으로 렌더링 프로세스를 수행하며 두 단계의 렌더링 프로세스를 사용하고 있다.

Render Phase

Render Phase의 주요 역할은 컴포넌트를 계산하고 업데이트 사항을 파악하는 단계이다.

 

1. React 컴포넌트 호출: React 컴포넌트를 호출하여 React Element 객체를 반환

Render Phase 1 - 컴포넌트 추출과정

 

2. Virtual DOM 생성: React 컴포넌트가 렌더링 해야 하는 UI를 Virtual DOM이라는 객체 값으로 변환하는 과정

Render Phase 2 - Virtual DOM 변환 과정

 

Virtual DOM
React Element라고 부를 객체 값의 모임
- 실제 DOM은 아님(복제판)
- 값으로 표현된 UI(Value UI)라고 이해하는 게 더 정확

 

Commit Phase

Commit Phase의 주요 역할은 계산된 결과를 실제 DOM에 반영하는 단계이다.

 

1. Virtual DOM -> Actual DOM 변환: Virtual DOM의 결과 값을 가지고 Actual DOM(실제 브라우저가 렌더링 하게 될)에 반영한다.

Commit Phase 1 - Virtual DOM을 Actual DOM 으로 변환 과정

 

2. 브라우저 렌더링 프로세스: 실제 브라우저가 업데이트가 되면 DOM이 변경된 걸 감지하고 렌더링 과정(HTML, CSS, JS 파싱 -> 렌더트리 생성 -> 레이아웃 -> 페인팅)을 수행한다.

Commit Phase 2 - DOM 렌더링 과정

 

굳이 이렇게 까지 복잡하게 하는 이유가 뭘까?

업데이트가 발생했을 때 React는 모든 변경 사항을 모아 최소한의 횟수로 DOM을 수정시켜 주고 우리도 모르게 자동으로 처리한다. 이로 인해 대부분의 상황에 충분히 빠른 업데이트를 보장할 수 있다.

---

3.  업데이트 발생 시 프로세스

1. Render Phase를 처음부터 다시 실행하여 새로운 Virtual DOM을 생성한다.
2. 새로운 Virtual DOM과 이전 Virtual DOM을 비교한다.
3. 비교점을 찾아 Actual DOM에 딱 한 번만 업데이트를 수정하게 된다. 만약 다른 점이 없다면 Actual DOM에 대한 업데이트를 수행하지 않는다.
4. 동시에 발생한 업데이트를 모아 한번만 DOM을 수정하여 대부분의 상황에 충분히 빠른 속도로 화면 업데이트가 이루어진다. 이 과정을 특별히 Reconciliation(재 조정)이라고 부른다.

Reconciliation 과정

---

정리

React의 렌더링 프로세스는 대부분의 상황에서 효율적인 DOM 업데이트를 위해 설계되었다.

• Render Phase: 컴포넌트를 계산하고 Virtual DOM을 생성
• Commit Phase: 변경 사항을 실제 DOM에 반영
• Reconciliation: 최소한의 DOM 업데이트로 성능 최적화

 

하지만 항상 최고의 속도를 보장하는 것은 아니며 Virtual DOM을 생성하고 비교하는 데에도 연산이 소요되기 때문이다. 최적화가 필요한 특정 케이스에서는 개발자가 상황에 따라 `useMemo`, `React.memo`, `useCallback` 등의 수동 최적화가 필요할 수 있다.

Front/React  React 최적화 - Memoization