[react] 리액트의 렌더링 정리

 

chatGPT 생성 이미지

 

리액트를 사용하면서도 리액트의 렌더링 과정을 자세하게 알아본 적은 없었다.

리액트로 사용된 코드는 브라우저에서 직접 실행할 수 없어서 javaScript코드로 변환하는 과정을 거쳐서 사용가능하고 가상 돔을 사용하여 효율적으로 렌더링을 진행한다고만 알고 있는 나 자신을 돌아보게 되었다.

이번 기회로 블로그에 글을 정리해 보면서 리액트 렌더링에 대해서 알아보자!

 

자바스크립트로 dom을 직접 조작해서 ui 업데이트를 구현할 시,
동시에 발생한 업데이트를 모아서 레이아웃과 리페인팅을 최소화하기 위해 노력해야 한다. (사이트 최적화)

하지만 규모가 점점 커질수록 순수 자바스크립트로는 힘들므로 리액트의 렌더링 과정을 통해 업데이트를 자동화하게 된다.

따라서 개발자는 리액트로 컴포넌트를 개발하게 되면 뒤에 일어나는 렌더링 과정에 작업을 하지 않아도 된다.

이처럼 좋은 라이브러리인 리액트의 렌더링 과정에 대해 알아보자

 

---

1. 트리거 단계 (Trigger phase)

사용자가 접속하거나 버튼을 클릭하는 등의 트리거로 렌더링이 발생한다.

 

- 초기 렌더링은 아래 createRoot 호출과 render 메서드 호출로 웹앱을 최초로 접속했을 때 발생한다.

const root = createRoot(document.getElementById('root'))
root.render(<Image />);

 

 

- 리 렌더링은 초기 렌더링이 진행한 후 set함수를 통해 상태를 업데이트하여 리 렌더링을 진행시킬 수 있다.

- useState, useReducer등으로 상태가 변경되거나 부모로부터 전달된 props가 변경될 때 렌더링 큐에 추가된다.

 

2. 렌더 단계 (Render phase)

컴포넌트 호출 및 가상 VDOM 생성

렌더 단계는 DOM에 그려질 요소들을 파악하는 과정이다.

 

React는 함수형 또는 클래스형 컴포넌트를 호출하여 React Element 객체 트리를 생성하고

이를 기반으로 VDOM(virtual DOM)을 구성한다.

 

- 초기 렌더에서는 루트 컴포넌트를 호출하여 createElement로 DOM 노드를 생성한다.

- 리 렌더에서는 이전 가상 DOM과 새 가상 DOM 트리를 비교하여 최소한의 변경점을 찾는다.

 

재조정

이 과정을 통해 어떤 부분을 DOM에 반영할지 결정한다. 이 과정을 재조정(Reconciliation)이라고 한다. 

(두 트리 간의 차이점을 효율적으로 찾기 위해 Diffing 알고리즘을 사용한다)

 

1) 리액트 컴포넌트 호출

2) React Element 객체 트리 반환

3) 객체 트리를 모아 VDOM 생성

 

 

3. 커밋 단계 (Commit phase)

커밋단계에서는 렌더 단계에서 비교한 가상 DOM 트리를 실제 DOM에 반영하는 단계이다.

 

- 초기 렌더링의 경우 렌더 단계에서 파악한 DOM 노드를 DOM에 반영한다.

- 리 렌더에서는 렌더링하는 동안 최소한의 변경사항을 DOM에 반영한다.

 

최종적으로 DOM 변경이 끝나면 브라우저가 화면을 새로 그린다.

 

 

4. 정리

1) 리액트 렌더링은 트리거 단계, 렌더 단계, 커밋 단계로 이루어진다.

2) 렌더 단계에서 가상 DOM을 생성 & 비교하여 동시에 발생하는 업데이트를 모아둔다.

3) 커밋 단계에서 가상 DOM에 반영된 모든 업데이트를 실제 DOM에 한 번에 반영한다.

4) 실제 DOM에 반영되면 브라우저의 페인트 & 레이아웃 과정 실행

 

 

추가 학습이 필요한 내용

- Fiber

- Concurrent Mode 스케줄링

 

 

 

 

참고문서

https://ko.react.dev/learn/render-and-commit

렌더링 그리고 커밋 – React

 

https://yceffort.kr/2022/04/deep-dive-in-react-rendering

리액트의 렌더링은 어떻게 일어나는가?

https://www.moonkorea.dev/React-%EB%A0%8C%EB%8D%94%EB%8B%A8%EA%B3%84-%EC%BB%A4%EB%B0%8B%EB%8B%A8%EA%B3%84

React의 렌더 단계와 커밋 단계

https://www.moonkorea.dev/React-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%9E%AC%EC%A1%B0%EC%A0%95

재조정

https://www.youtube.com/watch?v=N7qlk_GQRJU

React.js의 렌더링 방식 살펴보기 - 이정환 | 2023 NE(O)RDINARY CONFERENCE