5주차 위클리페이퍼 (리액트 렌더링, virtual DOM)

1. 리액트의 렌더링 과정

리액트의 렌더링 과정은 컴포넌트의 상태(state)와 속성(props) 변화에 따라 UI를 업데이트하는 일련의 과정입니다. 크게 렌더 단계와 커밋 단계로 나뉘며, 렌더 단계에서는 컴포넌트의 변경 사항을 계산하고, 커밋 단계에서는 실제 DOM에 변경 사항을 반영합니다. 

 

 

1) 렌더 단계 (Render Phase):

 

• 재조정(Reconciliation):

  컴포넌트의 새로운 props와 state를 기반으로 가상 DOM 트리를 생성하고, 이전 가상 DOM 트리와 비교하여 변경 사항을 찾습니다. 이 과정은 React Fiber 아키텍처를 통해 효율적으로 수행됩니다.
• 업데이트 계산:

  변경 사항이 있는 컴포넌트들을 파악하고, 어떤 DOM 노드를 업데이트해야 하는지 결정합니다. 이 때, key props를 사용하여 컴포넌트의 동일성을 판단하고, 효율적인 업데이트를 돕습니다. 

   

2) 커밋 단계 (Commit Phase):

 

• DOM 업데이트:

  렌더 단계에서 계산된 변경 사항을 실제 DOM에 반영합니다. 이 과정은 브라우저의 렌더링 과정을 거쳐 사용자에게 시각적인 변화로 나타납니다.
• useEffect 및 useLayoutEffect 훅 실행:

  DOM 업데이트 전후에 실행되어야 하는 사이드 이펙트(side effect)를 처리합니다. useEffect는 비동기적으로, useLayoutEffect는 동기적으로 실행됩니다. 

   

요약:

 

리액트의 렌더링 과정은 컴포넌트의 변경 사항을 계산하고, 실제 DOM에 반영하는 일련의 과정입니다. 효율적인 업데이트를 위해 가상 DOM을 사용하며, key props를 활용하여 컴포넌트의 동일성을 판단합니다. 

 

참고:

 

• 렌더링 트리거:

  setState, dispatch 함수 호출, 부모 컴포넌트의 렌더링 등에 의해 렌더링이 트리거될 수 있습니다.
• 렌더링 최적화:

  불필요한 렌더링을 줄이기 위해 React.memo, useMemo, useCallback과 같은 훅을 활용할 수 있습니다. 

   

리액트의 렌더링 과정은 복잡해 보일 수 있지만, 이러한 과정을 이해하면 컴포넌트의 동작 방식을 더 잘 파악하고, 효율적인 코드를 작성할 수 있습니다.

 

 

2. virtual DOM

 

DOM은 HTML의 트리 형태의 문서 구조입니다. (참고: )

virtual DOM은 실제 DOM의 구조를 공유하는 복사본입니다. 

실제 브라우저에 접근하는 것이 아니라 API는 제공하지 않고 때문에 가상 임에도 무거워지지 않습니다. 

 

Virtual DOM은 무엇인가요?

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.

이 접근방식이 React의 선언적 API를 가능하게 합니다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 합니다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화합니다.

“virtual DOM”은 특정 기술이라기보다는 패턴에 가깝기 때문에 사람들마다 의미하는 바가 다릅니다. React의 세계에서 “virtual DOM”이라는 용어는 보통 사용자 인터페이스를 나타내는 객체이기 때문에 Reacr element와 연관됩니다. 그러나 React는 컴포넌트 트리에 대한 추가 정보를 포함하기 위해 “fibers”라는 내부 객체를 사용합니다. 또한 React에서 “virtual DOM” 구현의 일부로 간주할 수 있습니다.

Shadow DOM은 Virtual DOM과 같은가요?

아니요, 둘은 다릅니다. Shadow DOM은 주로 웹 컴포넌트의 범위 지정 변수 및 CSS용으로 설계된 브라우저 기술입니다. virtual DOM은 브라우저 API 위에 있는 JavaScript 라이브러리에서 구현되는 개념입니다.

“React Fiber”는 무엇인가요?

Fiber는 React 16의 새로운 재조정 엔진입니다. 이 프로그램의 주요 목표는 virtual DOM의 증분 렌더링을 활성화하는 것입니다.