내가 현재 React에서 렌더링을 이해하는 방법 (개선된 내 정신 모델)
Source: Dev.to
죄송합니다만, 번역하려는 전체 텍스트를 제공해 주시면 한국어로 번역해 드리겠습니다. 현재는 링크만 제공되어 있어 실제 내용이 없으므로 번역을 진행할 수 없습니다. 텍스트를 복사해서 여기에 붙여 주시면 바로 도와드리겠습니다.
컴포넌트와 컴포넌트 인스턴스
먼저, 우리는 React 컴포넌트를 생성합니다. 컴포넌트는 기본적으로 JavaScript 함수입니다. 그 자체만으로는 브라우저 화면에 아무런 영향을 주지 않으며—컴포넌트를 정의했다고 해서 보이는 것이 없습니다.
JSX에서 해당 컴포넌트를 사용하면, React는 컴포넌트 인스턴스를 생성합니다. 하나의 컴포넌트는 하나의 인스턴스를 가질 수도 있고 여러 인스턴스를 가질 수도 있습니다. 각 인스턴스는:
- 자체적인 state를 가집니다
- 자체적인 props를 받습니다
- 자체적인 lifecycle을 가집니다
- 자체적인 메모리를 유지합니다
나는 컴포넌트 인스턴스를 살아있는 객체와 같이 생각합니다. 시간 속에 존재하고, 변할 수 있으며, 업데이트될 수 있고, React가 이를 추적합니다.
컴포넌트 인스턴스에서 React 엘리먼트로
모든 컴포넌트 인스턴스는 React 엘리먼트를 생성합니다. React 엘리먼트는 JSX가 React.createElement()를 사용해 JavaScript로 변환될 때 생성됩니다. 간단히 말하면:
- JSX는 구문입니다
- React 엘리먼트는 실제 JavaScript 객체입니다
각 React 엘리먼트는 UI에 표시되어야 할 내용을 설명합니다.
React 요소 트리와 가상 DOM
모든 React 요소는 함께 React 요소 트리를 형성합니다. 많은 사람들은 이 트리를 가상 DOM이라고도 부릅니다. 이 가상 DOM은 React에서 매우 중요한 역할을 하는데, 그 이유는 React가 다음을 가능하게 하기 때문입니다:
- UI 변경을 효율적으로 비교
- 불필요한 실제 DOM 업데이트 방지
- 실제로 필요한 부분만 업데이트
React 렌더링 (실제 의미)
이제 흔히 오해되는 렌더링에 대해 이야기해 보겠습니다. React에서는 렌더링이 NOT 화면에 무언가를 표시한다는 의미가 아닙니다. 렌더링은 UI 변경을 계산하는 React 내부 프로세스를 의미합니다.
When Rendering Is Triggered
Rendering is triggered mainly in two cases:
- Initial Rendering – 웹사이트를 열고 UI가 처음 나타날 때.
- State Update Rendering – 컴포넌트 내부에서 어떤 상태가 업데이트될 때.
This entire process happens inside React, not in the browser.
렌더링 중에 일어나는 일
우리는 이미 Virtual DOM 트리를 가지고 있습니다. 상태 업데이트가 발생하면:
- React는 모두를 무작정 다시 빌드하지 않습니다.
- React는 상태가 업데이트된 지점부터 트리의 해당 부분을 다시 렌더링합니다.
- 영향을 받은 컴포넌트와 그 자식 컴포넌트만 다시 렌더링되고, 부모 컴포넌트는 불필요하게 다시 렌더링되지 않습니다.
그 후, React는 이전 트리와 새로 생성된 트리를 비교합니다. 이 비교 과정을 reconciliation(조정)이라고 합니다.
Fiber와 Fiber 트리 (중요 부분)
조정(Reconciliation)은 Fiber라 불리는 React의 내부 엔진에 의해 처리됩니다. Fiber는 Fiber Tree라고 불리는 자체 구조를 가지고 있습니다. Fiber Tree에 대한 주요 포인트:
- 한 번만 생성됩니다.
- 반복적으로 다시 생성되지 않습니다.
- 시간이 지남에 따라 계속 업데이트됩니다.
Fiber Tree는 Virtual DOM 트리와 모양이 다르지만, 동일한 UI를 보다 최적화된 방식으로 나타냅니다.
진행 중인 Fiber 트리
업데이트가 발생하면:
- React는 Work‑In‑Progress Fiber Tree를 생성합니다.
- 변경 사항이 이 새로운 트리에 적용됩니다.
- React는 백그라운드에서 모든 작업을 준비합니다.
작업이 완료되면, 진행 중인 트리가 현재 Fiber 트리가 됩니다.
커밋 단계
조정이 완료되면 React는 커밋 단계로 이동합니다. 이 단계에서:
- 변경 사항이 실제 DOM에 적용됩니다.
- 업데이트가 화면에 표시됩니다.
이 전체 과정은 동기적으로 수행되며 개발자에게는 숨겨져 있습니다.
브라우저 렌더링 (React가 완료된 후)
React가 작업을 마치면 브라우저가 제어를 맡습니다. 브라우저는 레이아웃, 페인팅 및 화면에 표시되는 방식을 결정합니다. 이를 브라우저 페인트라고 하며, 이는 React의 책임이 아닙니다.
전체 흐름 (내가 이해한 대로)
Component creation
→ Component instance
→ React elements
→ React element tree (Virtual DOM)
→ Rendering trigger
→ Re‑rendering
→ Reconciliation (Fiber)
→ Work‑In‑Progress Fiber Tree
→ Commit phase
→ Browser paint최종 생각
저는 이 설명이 이전에 제가 이해했던 것보다 훨씬 낫다고 생각합니다. 저에게 가장 중요한 깨달음은 React 렌더링은 UI를 다시 계산하는 것이지 화면을 직접 업데이트하는 것이 아니다라는 점입니다.
아직 배우는 중이지만, 이 사고 모델은 견고하고 실용적이며, 다음을 이해하는 데 도움이 됩니다:
- 왜 재렌더링이 발생하는지
- React가 어떻게 빠르게 동작하는지
- 업데이트가 실제로 화면에 도달하는 방식
이것이 현재 제 이해이며, 더 깊이 파고들수록 발전할 것이라고 확신합니다.