🩵 React/학습 노트
[React🩵] 브라우저의 렌더링과 리액트의 렌더링
솔비님
2025. 5. 6. 21:44
☀︎ 브라우저와 리액트 렌더링의 공통점
코드를 시각적으로 화면에 보여주는 과정이다
즉, 렌더링이란 눈에 보이지 않는 코드 구조를 사용자에게 보이는 형태로 바꾸는 작업이다 = UI를 화면에 그리는 작업
☁︎ 브라우저에서의 렌더링
- HTML, CSS, JS를 받아서 순차적으로 화면을 구성한다
브라우저는 문서를 위에서부터 차례대로 읽으며 HTML(구조), CSS(스타일), JS(동작)을 해석한 뒤 화면을 완성해 나간다 - DOM(Document Object Model)을 직접 다루며, JS나 사용자의 변경사항 발생 시 DOM의 일부 또는 전체를 다시 계산(Reflow)과 그리기(Repaint)가 발생하기 때문에 복잡하고 버그가 생기기 쉽다
브라우저의 렌더링 과정
- CPR(Critical Redering Path)의 과정을 통해 진행됨
이는 브라우자가 화면을 그릴 때 반드시 거쳐야하는 주요 경로를 말하며 렌더링 최적화에서도 중요한 개념이다 - JS는 DOM 구조에 영향을 주기 때문에 실행되는 시점에 따라 스타일, 레이아웃 재계산(Reflow)이나 다시 그리기(Repaint)를 유발할 수 있다. 이 때문에 렌더링 성능에 큰 영향을 미칠 수 있다
HTML 파싱 → DOM 생성 : HTML을 읽어 브라우저 메모리 안에 구조화된 문서 객체 모델(DOM)을 만든다
CSS 파싱 → CSSOM 생성 : 스타일 시트를 해석하여 스타일 객체 모델(CSSOM)을 생성한다
DOM + CSSOM → Render Tree 생성 : 구조(DOM)와 스타일(CSSOM)을 합쳐 실제로 화면에 표시할 요소만 포함한 렌더 트리를 만든다
→ Layout 계산 (위치/크기)
→ Paint (픽셀로 변환)
→ Composite (화면 레이어를 합성하여 화면에 표시)
☁︎ React의 렌더링
- 가상 DOM(Virtual DOM)을 기반으로 렌더링을 최적화한다
실제 DOM을 직접 건들지 않고 가상의 DOM에서 먼저 작업을 진행해 실제 변경이 필요한 부분만 실제 DOM에 반영한다 - 직접 DOM을 조작하지 않기 때문에 필요한 컴포넌트만 렌더링할 수 있어서 효율적이다
DOM 변경은 비용이 커서 리액트는 최소한의 DOM 작업만 하도록 설계되어 있다(성능상 유리)
React의 렌더링 과정
Trigger - 렌더링을 유발
Rendering - 컴포넌트를 렌더링
Commit - DOM에 Commit(실제 DOM에 반영)
Trigger란
- 데이터가 변경되었는지 확인하는 과정이며 아래의 경우 렌더링이 Trigger된다
- 이 단계에서 리액트가 무언가 바뀐 것을 감지하게 된다
- State 변경
- Props 변경
- 부모 Component 리렌더링
- Context 변경
- Force Update : forceUpdate 메서드 사용 시 컴포넌트의 강제 리렌더링이 가능하다(가능한 피해야함)
Rendering 단계의 세부 흐름
- 컴포넌트 함수 실행 → JSX → Virtual DOM 생성 (Render Phase)
- 이전 Virtual DOM과 비교 → Diffing/Reconciliation Phase
- 변경 사항이 감지되면 → 일괄적으로 실제 DOM에 커밋 (Commit Phase)
이 중 Render와 Diffing 단계는 순수 함수처럼 동작하며 브라우저에 영향을 주지 않고 메모리상에서 처리된다
→ 실제 DOM 조작은 오직 Commit에서만 일어난다