🌟[매일메일] React의 render phase, commit phase란? (FE.241227)

리액트의 렌더링 과정은 크게 render phase, commit phase로 나뉜다.

React는 Fiber 구조를 사용해 Render phase와 Commit phase를 분리해 작업을 나눈다

 

React Fiber란?

- 렌더링 작업을 작은 단위(chunk)로 나누고, 우선순위에 따라 처리함

- 긴 렌더링 작업이 발생해도, 사용자의 상호작용을 처리할 수 있도록 비동기 처리가 가능하게 해줌

- Fiber는 중단 가능한 Render phase와 중단 불가능한 commit phase로 나눠서 작업을 관리함

- Fiber Node: Fiber의 구조는 Node의 구조체로 구성됨. Node에는 컴포넌트의 상태와 작업을 저장함

   - type: 이 노드가 나타내는 React component 타입(함수형, 클래스형, DOM 노드 등)

   - child(자식노드, 하위 컴포넌트), sibling(형제노드, 동등한 레벨), return(부모 노드)

   - pendingProps: 렌더링될 때 사용할 새로운 props

   - meoizedProps: 이전 렌더링 시 사용된 props

   - effectTage: DOM에 적용할 변경 사항(추가 삭제 업데이트)

 

render phase란? 변화된 ui를 결정하는 계산 과정.

- 리액트가 변화된 상태나 props에 따라 어떤 ui가 변경되어야 할지 결정하는 단계

- 실제로 dom을 업데이트 하지 않고, 변경사항을 가상 dom에서 계산해서 비교함 (순수한 계산 과정)

- 성능에 영향을 주지 않도록 중단되거나 다시 실행될 수 있음. 쪼개서 실행도 가능. (Interruptible, 중단 가능)

- react 18에서 도입된 concurrent mode를 통해 비동기적 처리 가능

 

commit phase란? 계산된 결과를 실제로 반영하는 단계.

- 실제로 변화된 ui를 dom에 반영하는 단계

- react는 가상 dom에서 계산된 결과를 실제 dom에 적용하고, 변화된 ui를 브라우저에 렌더링.

- 한 번에 변경 사항이 Real DOM에 반영되며, (Non-Interruptible, 중단 불가)

- dom 업데이트 이후에는 useEffect와 같은 side effect를 발생시키는 훅들이 실행됨

 

render phase와 commit phase가 동기화될 때 특징?

1. 단계적 진행

- render phase가 완료되면 다른 우선순위 작업을 먼저 처리한 후 commit phase를 실행할 수 있음(즉시 실행 안해도 됨)

- 동기화가 필요한 작업을 효율적으로 관리해 사용자 경험을 개선함

 

2. 병목 관리

- render phase에서 모든 변경 사항이 fiber tree에 준비된 상태에서 commit phase로 넘어감

- render와 commit 단계 의 일관성이 유지됨. ui를 정확하게 동기화하고 불필요한 재렌더링 방지.

 

React의 렌더링 흐름?

1. Render pahse: render() 메서드나 함수형 컴포넌트의 리턴 값 실행하고, 변경 사항 virtual DOM에서 확인

2. Diffing & Reconciliation: 새로운 Virtual DOM과 기존 Virtual DOM 비교해서 변경사항(patch) 계산

3. Comming Phase: 변경된 부분만 실제 DOM에 업데이트, Side Effect 관련 작업 실행

 

	Render Phase	Commit Phase
역할	UI 업데이트 계획 및 Virtual DOM 생성	Real DOM 업데이트 및 화면 반영
Side Effect	없음	있음(useEffect, DOM 조작 등)
DOM 접근	불가	가능
성능 향상	CPU 중심(계산 과정)	GPU 중심 작업(브라우저 렌더링)

 

 

예시

import React, { useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child count={count} />
    </div>
  );
}

function Child({ count }) {
  return <p>Count: {count}</p>;
}

// React Fiber Node를 확인하는 개발자 도구 사용
ReactDOM.render(<App />, document.getElementById("root"));

1. setCount(count+1) 호출 시 Render Phase 발생

    - console.log("Render Phase: 렌더링 중") 출력

    - Virtual DOM에서 변경 사항 계산

2. Commit Phase 발생

    - Real DOM 업데이트(<p> 내용 변경)

    - console.log("Commit Phase: Effect 실행") 출력

    - useEffect 실행

 

Fiber Node 확인

1. 초기 렌더링 시 child component의 pendingProps, memoizedProps는 0으로 동일함

2. 상태가 변경된 경우, pendingProps의 값은 1 증가함.

3. Render Phase에서 react는 pendingProps와 memoizedProps를 비교해 변경사항을 감지

4. Commit Phase 이후 변경 사항이 Real DOM에 반영되면,  memoizedProps가 업데이트 되어 pendingProps와 같아짐.

 

---

 

출처

[1] 매일메일. 241227. 리액트의 render phase와 commit phase에 대해서 설명해주세요. https://maeil-mail.kr 

[2] gpt에게 render phase, commit phase에 대해 묻다