[React] React의 렌더링 과정 깊숙이 이해하기

React의 렌더링, 왜 알아야 할까?

React를 배우다 보면 '렌더링'이라는 단어를 자주 접하게 된다.

렌더링이란 도대체 무엇이고 왜 중요할까?

 

React는 사용자의 행동이나 상태 변화에 따라 UI를 업데이트한다.

이때 UI가 어떻게 바뀌는지를 결정하고 실제로 화면에 보여주는 과정을 `렌더링(Rendering)`이라고 한다.

즉, React에서의 렌더링은 애플리케이션의 성능과 사용자 경험을 좌우하는 핵심 개념이다.

 

그렇기 때문에 우리는 React를 공부하면서 렌더링 과정을 깊숙이 이해할 필요가 있다.

렌더링 과정을 이해하게 되면, 성능 최적화를 위해 어떤 부분을 건드려야 하는지 자연스럽게 알게 되기 때문이다.

 

그래서 이번 글에서는 React의 렌더링 과정은 구체적으로 어떻게 흘러가고, Virtual DOM이 무엇인지 설명해보려고 한다.

 

 

React의 렌더링은 무엇일까?

프론트엔드를 공부하다 보면 자연스레 브라우저 렌더링 과정을 알게 된다.

기존의 브라우저 렌더링 과정과 React의 렌더링 과정은 조금 다르다.

 

React에서 `렌더링`은 브라우저에 필요한 DOM 트리를 만드는 과정이다.

React는 자체적인 렌더링 과정을 갖고 있으며, 이 과정은 크게 두 단계로 나뉜다.

- Render 단계: 어떤 UI를 보여줄지 결정하는 단계
- Commit 단계: 변경된 내용을 실제 DOM에 반영하는 단계

 

 

React 렌더링의 전체적인 흐름

React의 전체적인 흐름을 좀 더 구체적으로 설명하면 다음과 같다.

1. state나 props가 변경된다.
2. 새로운 Virtual DOM이 생성된다.
3. 이전의 Virtual DOM과 새로운  Vritual DOM을 비교한다. (Diffing)
4. 변경된 부분만 추려내서 업데이트 계획을 수립한다. (Reconciliation)
5. 최소한의 변경만 실제 DOM에 반영한다. (Commit)

 

1. state나 props가 변경된다.

📌 state가 변경되는 상황

예를 들어, 게시글 목록을 저장하는 `postList`라는 state를 생성해서 관리하고 있다고 해보자.

사용자가 게시글을 작성한 뒤에 작성 완료 버튼을 눌렀다.

사용자가 작성한 새로운 게시글이 `postList`에 추가됨으로써 state가 변경된다.

해당 변경 내용이 React에게 '다시 렌더링을 해야 돼!'라는 신호가 된다.

 

📌 props가 변경되는 상황

`postList`라는 state를 App 컴포넌트(부모 컴포넌트)에서 관리하고 있다고 해보자.

App 컴포넌트 내부에는 게시글 목록을 보여주는 PostList 컴포넌트(자식 컴포넌트)가 있다.

App 컴포넌트는 `postList`를 props로 PostList에 전달한다.

사용자가 새로운 게시글이 추가함으로써 `postList`가 변경되는데, 이때 PostList의 props도 달라진다.

PostList는 props가 변경됐기 때문에 리렌더링의 대상이 된다.

 

2. 새로운 Virtual DOM이 생성된다.

state나 props가 바뀌면, React는 그에 따라 UI가 어떻게 바뀌어야 할지 계산하기 위해 컴포넌트를 다시 호출한다.

호출에 대한 결과로 새로운 Virtual DOM 트리를 생성한다.

해당 작업은 메모리 상에서 가벼운 객체 구조로 UI를 다시 그려보는 작업이다.

 

위에 예시를 그대로 이어가 설명해 보자면,

기존에는 게시글이 5개가 있던 Virtual DOM이 있었다면,

새로운 게시글이 추가되면서 게시글 6개를 가지고 있는 Virtual DOM이 새롭게 만들어지는 것이다.

 

3. 이전의 Virtual DOM과 새로운  Vritual DOM을 비교한다. (Diffing)

새로운 Virtual DOM이 만들어졌을 때, React는 이전 Virtual DOM과 새 Virtual DOM을 비교한다.

이 과정을 통해 어떤 부분이 바뀌었는지 파악하는데, 해당 과정을 `Diffing`이라고 부른다.

React는 트리 구조를 순회하면서 2개의 트리의 차이를 발견하고, 어떤 요소를 바꿔야 할지 기록한다.

 

기존의 Virtual DOM과 새로운 Virtual DOM은 게시글의 개수에서 차이를 보이고 있다.

React는 '게시글이 1개 추가가 됐네?'라고 판단하고, 추가된 항목에만 집중한다. 

 

4. 변경된 부분만 추려내서 업데이트 계획을 수립한다. (Reconciliation)

2개의 Virtual DOM에 대한 비교를 마친 React는 '어디를 어떻게 바꿀 것인가'에 대한 업데이트 계획을 세운다.

해당 계획은 실제 DOM 변경 작업을 하기 전 단계로 가장 효율적인 방식으로 수정할 수 있도록 정리한다.

실제로 변경할 작업 목록을 만든다고 생각하면 된다.

 

이 작업을 `Reconciliation(재조정)`이라고 한다.

그리고 여기까지의 과정을 `Render Phase`라고 한다.

 

새로운 게시글이 1개 추가됐다는 것을 파악한 React는

'기존의 <li> 태그들은 그대로 두고 새로운 <li> 태그 하나만 추가하면 되겠네'라고 판단을 내린다.

전체 구조를 다시 만드는 것이 아니라, 변경이 필요한 최소의 작업만 준비한다.

 

5. 최소한의 변경만 실제 DOM에 반영한다. (Commit)

마지막으로 React는 준비한 업데이트 계획을 실행에 옮긴다.

이 단계에서 실제 DOM이 수정되는 작업이 발생한다.

이 과정을 `Commit Phase`라고 한다.

 

Commit 단계에서 실제 DOM을 수정하면

브라우저가 반응해서 렌더링 파이프라인을 작동시킨다.

 

렌더링을 유발하는 시점

위에서 이미 설명해서 알 수 있듯이 React는 다음과 같은 상황에서 렌더링을 실행한다.

- 앱이 처음 로드될 때 (= 최초 렌더링)
- state가 변경될 때
- props가 변경될 때

 

 

React에서 Virtual DOM을 사용하는 이유

브라우저의 렌더링 과정을 잠깐 보면, 업데이트가 발생할 때마다 브라우저는 렌더 트리를 다시 계산하고 다시 화면에 그리는 과정을 수행한다. 이때 2개의 과정을 각각 reflow와 repaint라고 부른다. 각각의 과정은 브라우저의 리소스를 많이 소모하는데, 업데이트가 자주 일어나면 성능이 급격히 떨어지는 문제가 발생한다.

 

그래서 React는 Virtual DOM이라는 개념을 도입하였다.

리소스 소모를 줄이기 위해서는 렌더 트리의 변경을 최소화해야 됐는데, 렌더 트리의 변경을 최소화하기 위해 Virtual DOM을 사용하는 것이다.

 

Virtual DOM을 사용하면 업데이트된 내용을 한 번에 모아서 실제 DOM에 적용하기 때문에 렌더 트리가 변경되는 과정을 최소화할 수 있다. 변경 사항을 미리 계산하여 최소한의 내용만 실제 DOM에 적용한다.

 

Virtual DOM은 정확히 무엇일까?

Virtual DOM은 Javascript로 이루어진 가벼운 트리 구조 객체이다.

해당 객체는 컴포넌트들이 반환하는 JSX의 구조를 반영하며, 실제 DOM과는 별개로 메모리 상에서만 관리한다.

 

첫 문장만 읽으면 Virtual DOM이 무엇인지 와닿지 않을 것이다.

'Javascript로 이루어진 가벼운 트리 구조 객체'를 차근차근 이해해 보자.

 

🤔 트리 구조는 무엇일까?

실제 DOM처럼 계층적인 형태로 이루어졌다는 것을 뜻한다.

렌더링 엔진은 HTML 파일을 파싱 해서 DOM을 만드는데,

사진과 같은 계층 구조로 이루어져 있다.

 

🤔 왜 가벼운 객체라고 하는 것일까?

브라우저에서 만든 실제 DOM 노드는 다양한 정보를 담고 있기 때문에 메모리 사용량이 크다.

하지만 이것에 비해 단순 Javascript 객체로 만들어진 Virtual DOM은 메모리 소모가 적다.

 

 

여기에서 이런 의문이 들 수 있다.

Virtual DOM을 사용하지 않고, Javascript에서 해당 과정을 수행할 수는 없을까? 

꼭 React의 Virtual DOM을 사용해야 되는가?

 

해당 질문의 대답은 '아니다'라고 말할 수 있다.

Javascript에서도 해당 과정을 코드로 만들 수 있다.

DOM 조작을 통해 어떤 것이 변화했고, 어떤 것은 변화하지 않았는지 파악하는 작업을 진행하면 된다.

다만 이 과정은 굉장히 번거롭다.

번거로운 과정을 React의 Virtual DOM이 자동화하고 추상화해 준다고 생각하면 된다.

 

 

마무리

오늘은 React의 렌더링 과정에 대해 자세히 알아보았다.

차근차근 하나씩 무엇인지 파헤치다 보니 React의 렌더링 과정에 대한 전반적인 흐름이 잡혔다.

먼저 큰 흐름을 잡고, 세부적인 내용에 들어가니깐 머릿속에서 개념이 확실하게 잡힌 느낌이다.

React 렌더링 과정을 정확하게 이해하고 싶다면, 추상적인 개념을 스스로 이해할 수 있는 개념으로 좁혀질 때까지 정리해 보길 바란다.

 

---

[참고 자료]

- https://velog.io/@arthur/%EB%B2%88%EC%97%AD-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%8F%99%EC%9E%91%EC%9D%98-%EA%B1%B0%EC%9D%98-%EC%99%84%EB%B2%BD%ED%95%9C-%EA%B0%80%EC%9D%B4%EB%93%9C-A-Mostly-Complete-Guide-to-React-Rendering-Behavior
- https://www.minsug.me/react-rendering
- https://ko.react.dev/learn/render-and-commit
- https://cdragon.tistory.com/entry/Front-End-React-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%A9%EC%8B%9D-React-%ED%83%84%EC%83%9D-%EB%B0%B0%EA%B2%BD
- https://youngslog.medium.com/virtual-dom%EA%B3%BC-incremental-dom-65448de4cf92