React.js 렌더링 방식

 

📍 웹 브라우저 동작

HTML, CSS로 → 브라우저

Critical Rendering Path를 통한 렌더링 과정

1. HTML → DOM, CSS → CSSOM
   • DOM: HTML을 브라우저가 해석하기 편한 방식으로 변환한 객체 트리
   • CSSOM: CSS Object Model
2. Render Tree 생성: 청사진
3. Layout: Render Tree 기반으로 요소들 배치 결정
4. Painting

 

Update
DOM이 수정되면 Critical Rendering Path 다시 실행

• Reflow(다시 Layout), Repaint 는 성능 낮게하는 주범→ DOM을 수정하는 과정 최소화하기
• 다만, Layout과 Painting은 매우 비싼 과정
• → JS가 DOM을 수정하면서 업데이트가 발생

 

결론

다양한 업데이트 → 동시에 발생한 업데이트 모음, 다모였다면 한번에 수정 → DOM

단, 서비스 규모 커질수록 힘들어짐 → React JS에서는 자동으로 됨: 최소한의 횟수로 DOM 수정

why? React JS는 다른 렌더링 프로세스

 

 

 

📍 React 렌더링 프로세스

2단계 나뉘어진 렌더링 프로세스

1. Render Phase: 컴포넌트 계산하고 업데이트 사항 파악하는 단계
   1. 컴포넌트(React Element) 호출해 결과값 계산
   2. React Element 모아서 Virtual DOM 생성
      • Virtual DOM: 실제 DOM 아니고 값으로 표현된 UI (Value UI)
2. Commit Phase
   1. Virtual DOM을 Actual DOM에 반영 → Critical Rendering Path

 

왜 복잡? DOM 수정 최소화하기 위해 → 대부분의 상황에 충분히 빠른 업데이트 보장하기 위해

단, 항상 최고의 속도를 보장하진 않음 → Virtual DOM 생성하고 비교하는데도 연산 소요하기 때문!

 

Update

Reconciliation (재조정) 

• Render Phase 처음부터 다시 실행 → 새로운 Virtual DOM 생성 → 이전 렌더링으로 만들어진 prev Virtual DOM과의 차이점 비교 → 계산된 차이점을 Actual DOM에 반영

 

 

 

참고

2023 너디너리 컨퍼런스:  ReactJS 렌더링 방식 살펴보기 - 이정환

 

https://www.dbswebsite.com/blog/understanding-the-critical-rendering-path/

Understanding the Critical Rendering Path | DBS Interactive

https://www.telerik.com/blogs/understand-how-rendering-works-react

Understand How Rendering Works in React