모던 리액트 Deep Dive - 렌더링은 어떻게 일어나는가

* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다.

 

렌더링은 어떻게 일어나는가?

• 리액트의 렌더링은 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정을 의미

리액트의 렌더링이란?

• 리액트의 렌더링이란 리액트 어플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props, state 의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에게 제공할 것이지 계산하는 일련의 과정을 의미.

리액트의 렌더링이 일어나는 이유

렌더링이 발생하는 시나리오

 

1. 최초 렌더링
2. 리렌더링

• useState()의 두번째 배열 요소의 setter 가 실행되는 경우
• useReducer()의 두번째 배열 요소인 dispatch가 실행되는 경우
• 컴포넌트의 key props가 변경되는 경우

key 가 왜 필요할까

- 리렌더링이 발생하는 동안 형제 요소들 사이에서 동일한 요소를 식별하는 값이다.
- 파이버 트리 구조에서 current tree와 workInProgress tree 사이에서 어떠한 컴포넌트가 변경이 있었는지 구별하는 값이 key다.

- key가 있는 경우 : 두 트리 사이에서 고유한 key 값으로 구별함
- key가 없는 경우 : 단순히 파이버 내부의 sibling 인덱스만을 기준으로 판단하게 됨

- key가 동일할 경우 불필요한 리렌더링을 막아줌. 또한, 강제로 리렌더링을 일으키는 것도 가능해짐.

• props가 변경되는 경우 : 자식 컴포넌트에서 props를 사용하기 때문에 리렌더링 일어남 
• 부모 컴포넌트가 리렌더링 될 경우

리액트의 렌더링 프로세스

• 리액트의 렌더링 프로세스는 크게 렌더 단계와 커밋 단계로 나누어짐.
• 리액트의 렌더링이 일어난다고 해서 커밋단계는 생략될 수 있음.
• 불필요한 리렌더링 즉, 필요없는 커밋단계를 줄이려면 memo를 활용할 수 있음.

1. 렌더 단계
   • 리액트는 컴포넌트 트리의 루트에서부터 시작하여, 업데이트가 필요한 모든 컴포넌트를 찾아 내려갑니다.
   • 각 컴포넌트의 렌더링 결과물을 수집하여 새로운 가상 DOM 트리를 생성합니다.
   • 리액트는 새로운 가상 DOM과 이전 가상 DOM을 비교하여 실제 DOM에 반영할 변경 사항을 계산합니다. 이 과정을 재조정(Reconciliation)이라고 합니다.
2. 커밋 단계
   • 재조정 과정이 완료되면, 리액트는 모든 변경 사항을 하나의 동기 시퀀스로 실제 DOM에 적용합니다.
   • 이를 통해 사용자에게 변경된 결과물이 반영됩니다.

NOTE : 하나의 동기 시퀀스로 실제 DOM에 적용하는 이유가 뭘까?

- 모든 변경 사항을 한 번에, 순차적으로 적용한다는 의미
= 각 변경 사항이 서로 영향을 주지 않도록 하고, 최종 결과를 일관되게 유지함.
= 리액트는 변경된 내용을 효율적으로 처리하기 위해 동기화된 방식으로 한꺼번에 DOM을 업데이트함.

즉, 렌더 단계에서 모든 변경사항을 수집하고 순차적으로 하나의 일괄 작업으로 처리하여 실제 DOM에 반영함.
= 일관성이 있는 업데이트를 위함.

- 비동기 방식으로 이루어질 경우 사용자는 하나의 상태에 대해 여러가지 다른 UI를 볼 수 있게 됨!
- 이를 개선하기 위해 의도된 우선순위로 컴포넌트를 렌더링해 최적화할 수 있는 비동기 렌더링, 동시성 렌더링이 리액트 18에 도입됨.