[250710] TIL

Today I Learned (2025-07-10)

리액트 렌더링 동작 원리

• 우리가 흔히 아는 렌더링 방식은 DOM 트리 > CSSOM 트리 > 렌더 트리 > 레이아웃 > 페인트 > 컴포지션 단계를 거쳐 렌더링 됩니다.
• 리액트를 사용하면, 위 렌더링이 발생하기전에 리액트 내부에서 2단계의 렌더링이 발생
• 우리는 2단계의 렌더링을 알아보고, 메모이제이션을 이용해 최적화 하는 방법을 알아보겠습니다.

1단계 : Render Phase

• 무엇을 변경할까 ? 결정하는 JavaScript 계산 단계

  1. 컴포넌트 함수 실행 (JSX -> React.createElement -> JS 객체)

     function Counter({ count }) {
       return <div>{count}</div>;
     }
     

     // Babel 변환
     const vdom = React.createElement("div", null, count);
     

     const prevVDOM = { type: "div", props: { children: 1 } };
     const nextVDOM = { type: "div", props: { children: 2 } };
     

  2. 이전 가상 DOM과 새로운 가상 DOM 비교 (Diffing)
  3. 변경 사항 계산
• 실제 DOM 접근 하지 않음
• 모든 것은 메모리 위에서 일어남

2단계 : Commit Phase

• Render Phase 에서 계산된 변경 사항을 실제 DOM 에 적용하는 단계
• appendChild, setAttribute 등 실제 DOM API 호출
• Commit Phase 에서의 발생하는 DOM 변경이 우리가 잘 알고 있는 브라우저 렌더링을 트리거함

Tips !

• useLayoutEffect 실행
  • 브라우저 렌더링 단계에서 paint 되기 전, 실행되는 리액트 훅
  • 참고로 useEffect 는 paint > composite 까지 다 끝나고 실행됨