[React] Render Phase와 Commit Phase

Render Phase와 Commit Phase

render phase는 렌더 단계로, 리액트를 통해서 실제 DOM에 그려질 내용을 미리 계산해보는 단계이고,

commit phase는 커밋 단계로, 실제 DOM과 렌더 단계에서 계산한 가상 DOM을 비교해서 실제 DOM에 변경사항을 반영해주는 단계이다.

Render Phase는 리액트를 통해 실제 DOM에 그려질 내용을 미리 계산해보는 단계로,
가상 DOM을 생성하고 이전 가상 DOM과 비교(diff)를 준비하는 과정이다.

Commit Phase는 그 계산 결과를 기반으로, 실제 DOM에 변경 사항을 반영하고,
useEffect, ref 연결 등의 사이드 이펙트가 실행되는 단계이다.

function CorrectExample() {
  const ref = useRef(null);

  useEffect(() => {
    ref.current?.focus(); // DOM이 생성된 후 안전하게 접근
  }, []);

  return <input ref={ref} />;
}

더 이해하기 쉽게

예시로 Render Phase 이해하기

React가 UI를 어떻게 그려야 할지를 계산하는 단계

1. useRef(null) 호출을 통해 ref 객체 생성
2. JSX <input ref={ref}/>를 통해 가상 DOM 생성
3. useEffect()를 통해 커밋 단계 (실제 DOM)에서 실행할 로직을 등록

즉, 해당 과정을 끝내도 아직 아무것도 렌더링 되지 않는다. 단지 준비를 끝냈을 뿐

예시로 Commit Phase 이해하기

React를 통해 만든 가상의 DOM을 활용해 실제 브라우저에 DOM을 반영하는 단계

1. Render Phase에서 준비한 가상 DOM을 실제 브라우저에 그림
2. <input> DOM이 만들어지고, ref.current에 연결
3. ref.current는 실제 DOM 요소를 참조
4. 등록해둔 useEffect() 내부 로직이 실행 (ref.current.focus())

즉, <input>에 포커스가 맞춰짐

마무리

리액트는 HTML을 효율적으로 그리기 위한 일종의 방법론에 불과한가..? 그렇겠다.

최소한의 비용으로 DOM을 그리고, 업데이트 할 수 있는 프로그래밍의 패러다임인 것이다.

리액트의 큰 특징으로 단순 컴포넌트 구조의 설계 밖에 생각 못했던 내가 안타까웠다.