[React] React의 렌더링 프로세스(Virtual DOM)

 

들어가며

React 의 특징 중 하나는 Virtual DOM(가상돔) 를 가지고 있다는 것이다.

리액트가 가상돔으로 어떻게 렌더링을 하는지 알아볼 것이다

 

React 의 렌더링 프로세스

Virtual DOM (가상 돔)

DOM 을 변경하는 작업이 많아질수록, 브라우저는 많은 연산을 수행해야 하고 이는 성능 저하로 이어질 수 있다.

React 같은 라이브러리는 가상 DOM 을 사용해서 이 문제를 해결한다. 

 

Virtual DOM(가상 돔) 은 실제 DOM의 복사본으로, JS 객체 형태로 메모리 안에 저장된다.

가상돔은 브라우저의 실제 DOM을 조작하기 전에 변경 사항을 미리 계산하고,

최소한의 작업만 실제 DOM 에 적용하도록 도와준다.

이를 통해서 성능을 최적화하고 빠른 UI 업데이트를 할 수 있게 해준다.

 

React 의 렌더링 프로세스

1. 컴포넌트에서 반환하는 JSX 를 React Element 라는 객체를 생성한다.
2. React Element 들을 모아서 Virtual DOM 을 생성한다.
3. 생성된 가상돔을 바탕으로 브라우저의 실제 DOM 에 컴포넌트를 렌더링한다

React 의 리렌더링 프로세스

React 에서 상태(state) 나 props 가 변경될 때 컴포넌트를 다시 렌더링한다.

 

React 는 2단계를 거쳐서 화면에 UI 를 리렌더링한다.

1. Render Phase(렌더 단계) : 컴포넌트를 계산하고 업데이트 사항을 파악하는 단계
2. Commit Phase(커밋 단계) : 변경사항을 실제 DOM 에 반영하는 단계

Render Phase(렌더 단계)

리액트 컴포넌트가 렌더링 해야하는 UI 를 가상돔으로 변환하는 과정이다.

리액트는 두 개의 가상돔을 가지고 렌더링을 진행한다. 

첫 번째 가상 돔은 변경 이전의 내용을 담고 있고, 두 번째 가상 돔은 변경 이후에 보여질 내용을 담고 있다.

출처 : 코딩온 교안 자료

리액트는 변경 전 가상 돔과 변경 후 가상 돔의 차이점을 비교해서 어느 부분이 바뀌었는지 파악한다.

이 과정을 Diffing 이라고 한다.

이 때, 동시에 발생하는 업데이트들을 모은다.

 

이 단계에서는 화면에 실제로 변경사항을 적용하지 않고, 변경 사항을 기록하는 순수한 계산 작업만 진행한다.

 

Commit Phase(커밋 단계)

변경된 Virtual DOM(가상돔) 을 Actual DOM 에 반영시키는 단계다.

이 때, 리액트는 Render Phase 에서 반영된 모든 변경사항을 Actual DOM 에 한번에 업데이트 한다.

 

 

렌더링 프로세스 정리

1. 리액트는 두 개의 가상돔(변경 이전의 가상돔, 변경 후의 가상돔) 의 내용을 비교해서 동시에 발생하는 업데이트들을 모은다. (Diffing)
2. Diffing 을 통해 변경 사항을 파악한 후, 반영된 모든 업데이트들을 실제 돔에 한번에 적용시킨다.
   (Reconsiliation)

이 과정들을 거쳐서 업데이트를 하므로, 실제 돔 조작을 최소화하여 성능을 최적화할 수 있다.

다만, 가상돔을 생성하고 비교하는데에도 연산이 소요되기 때문에 

React.Memo, useMemo, useCallback 같은 메모이제이션을 할 수 있는 리엑트 도구들을 사용해서 

불필요한 리렌더링을 방지하고 적절한 최적화를 해야한다.

 

 

Reference

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

 

https://www.youtube.com/watch?v=gc-kXt0tjTM