[React] 4. React의 렌더링 방식

 

 

 

 목차

• 웹 브라우저 동작 방식 
  • 업데이트 작업 과정
• React의 렌더링 프로세스
  •  React 렌더링 프로세스 상세 과정

 

 

 

1. 웹 브라우저 동작 방식

• Critical Rendering Path 라는 과정을 통해 브라우저가 페이지를 화면에 렌더링을 한다
  • 1단계 : HTML, CSS를 브라우저가 해석하기 편한 방식으로 변환
  • 2단계 : HTML과 CSS를 합쳐 Render Tree 생성
  • 3단계 : Render Tree를 기반으로 실제 웹 페이지에 요소들의 배치를 결정
  • 4단계 : 실제 요소들을 화면에 그려내는 과정

 

 

 

 

1) 업데이트 작업 과정

1. JS가 DOM을 수정하면서 업데이트가 발생
2. DOM이 수정되면 Critical Rendering Path가 다시 실행
3. DOM의 수정 횟수만큼 Layout과 Painting 수정도 진행되며 브라우저에 렉이 걸리거나 튕기는 현상이 발생
4. 때문에 DOM의 수정을 최소화 하기 위해 JS가 진행하는 수정들을 한 번에 모아 DOM을 한 번 수정하는 방식으로 진행

 

 

 

 

2. React의 렌더링 프로세스

• 웹 브라우저의 업데이트 과정에서 요구되는 'JS의 수정사항을 한 번에 모아 DOM을 한 번 수정하는 작업'이 React에서는 자동화가 된다
  • 1단계 (Render Phase) : React Component가 렌더링 해야하는 UI를 Virtual DOM이라는 객체값으로 변환하는 과정
  • 2단계 (Commit Phase) : Virtual DOM을 Actual DOM에 반영

 

 

 

 

1) React 렌더링 프로세스 상세 과정

1. Component 수정
2. Component 수정으로 인해 React Element가 변경
3. 변경된 React Element를 Virtual DOM에서 이전 데이터들과 비교
4. 바뀐 부분을 Actual DOM으로 넘겨 DOM 수정을 1회만 진행 (DOM 수정 횟수를 최소화하여 브라우저의 빠른 속도를 유지)