React.js의 렌더링 방식 살펴보기 - 이정환 | 2023 NE(O)RDINARY CONFERENCE (링크 - https://www.youtube.com/watch?v=N7qlk_GQRJU)
React 렌더링 프로세스
1-1. 웹 브라우저 동작 원리 (Critical Rendering Path)
- HTML과 CSS를 브라우저가 해석하기 편한 방식으로 DOM과 CSSOM를 만든다.
- DOM과 CSSOM를 합쳐 Render Tree(청사진)를 만든다.
- Render Tree를 기반으로 Layout을 잡는다.
- 화면에 그려준다.
1-2. 업데이트는 어떻게 이뤄질까?
자바스크립트 언어로 DOM을 직접 조작 -> 변경된 DOM으로 렌더링 과정을 2번부터 다시 거친다..! 즉, Reflow와 Repainting 작업이 반복된다..!
코드 예제 (비효율적인 방법)
<script>
function onClick() {
const $ul = document.getElementById("ul");
for (let i = 0; i < 3000; i++) {
$ul.innerHTML += `<li>${i}</li>`; // Reflow와 Repainting 3000번 실행
}
}
</script>
<body>
<button onclick="onClick()">리스트 추가하기</button>
<ul id="ul"></ul>
</body>코드 예제 (효율적인 방법)
<script>
function onClick() {
const $ul = document.getElementById("ul");
let list = "";
for (let i = 0; i < 3000; i++) {
list += `<li>${i}</li>`;
}
$ul.innerHTML = list; // Reflow와 Repainting 1번 실행
}
</script>
<body>
<button onclick="onClick()">리스트 추가하기</button>
<ul id="ul"></ul>
</body>효율적인 방법을 React에서 자동으로 해주고 있다..!
2-1. React 렌더링 프로세스
Render Phase + Commit Phase로 나뉨
2-2. Render Phase
컴포넌트를 계산하고 업데이트 사항을 파악하는 단계
Render Phase 1 - 컴포넌트를 호출해 결과값을 계산 (컴포넌트를 React Element로 변환하는 과정)
Render Phase 2 - React Element들을 모아 Virtual DOM 생성
2-3. Commit Phase
변경사항을 실제 DOM에 반영하는 단계
Virtual DOM -> Actual DOM 반영 -> 자바스크립트가 DOM을 수정하면 동작하는 과정 수행!
이렇게 복잡한 이유가 뭐야!
.
..
...
....
.....
DOM 수정을 최소화하기 위해서...!
그럼 React에서 업데이트가 일어나면 어떻게 되나요?
같은 렌더링 프로세스를 거쳐 Next Virtual DOM을 생성하고 Prev Virtual DOM과 비교하여 수정된 부분을 Actual DOM에 반영 -> 이러한 과정을 Reconciliation(재조정)이라 부른다...
꾸준함에 도전하는 중