📅 2025-10-14

➡️ React 렌더링 과정에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리

---

🔎 학습 리마인드

📌 렌더링

• 컴포넌트가 현재 props와 state 값을 바탕으로 UI를 어떻게 그릴지 결정하는 과정

비유를 들어 설명하면,

• 컴포넌트 = 요리를 만드는 주방장
• 리엑트 = 주문을 전달하고 결과물을 손님에게 가져주는 웨이터
• UI = 손님이 받는 요리

렌더링은 아래와 같이 이해하자

• 트리거(trigger) : 손님이 주문을 하고, 웨이터가 주방에 전달합니다.
• 렌더링(rendering) : 주방방이 주문에 맞게 음식을 준비합니다.
• 커밋(commit) : 완성된 음식을 웨이터가 손님 테이블에 서빙한다

💡 렌더링 발생 시점

1. 앱을 처음 실행할 때 (최초 렌더링)
2. 상태(state)가 바뀌었을 때
   • 컴포넌트 내부에서 State가 변경될 때
   • 상위 컴포넌트에서 새로운 props가 내려올 때
   • 부모 컴포넌트의 변화가 자식에게 전파될 때

• 최초 렌더링이 일어나면 리엑트는 컴포넌트에서 시작해서 아래쪽 자식 컴포넌트까지 훑으면서 JSX로 정의한 UI를 실제 DOM에 반영
  
  

💡 리렌더링

• 최초 렌더링이 이뤄진 후, 화면을 다시 그리고 싶다면 상태를 바꿔줘야 함 → 예) setState 사용
• 컴포넌트의 상태(state)가 달라지면 리렌더링이 발생하고, 여러 변경 요청은 리엑트 내부에서 큐(queue)에 쌓여 순서대로 처리됨

비유

1. 첫 주문 이후에 손님이 음료를 추가로 주문하거나, 다른 메뉴를 다시 시키는 상황이 리렌더링에 해당
2. 리액트는 새로운 주문을 받아 주방(컴포넌트)에 전달하고, 컴포넌트는 최신 주문에 맞게 새로운 요리(UI)를 만듦
3. 완성된 음식은 다시 웨이터(리액트)를 통해 손님 테이블(DOM)에 올려짐

💡 브라우저 렌더링과의 차이

• 리엑트의 렌더링 → 리액트가 어떤 UI를 만들고 DOM을 업데이트를 하는 과정
• 브라우저 렌더링 → 변경된 DOM을 실제 화면에 그려주는 과정

---

📌 DOM과 Virtual DOM

💡 브라우저가 렌더링 되는 원리

• 리액트(React)나 뷰(Vue) 같은 현대 프론트엔드 라이브러리는 Virtual DOM(가상 돔)을 사용해 화면을 업데이트
• 가상 DOM은 실제 DOM보다 훨씬 가볍게 동작하도록 설계되어 있기 때문에, 복잡한 UI도 빠르게 갱신할 수 있음
  
  

💡 DOM(Document Object Model)

• 웹페이지는 HTML 문서로 이루어져 있음. 브라우저는 이 문서를 트리 구조(Tree Structure)로 해석해 표현 → DOM
  - 문서(document): 웹 페이지 전체
  - 요소(element): 페이지를 이루는 태그(예: div, h1, p 등)
  - 트리(Tree): DOM은 이러한 요소들을 계층 구조로 표현
  - 노드(Node): DOM 트리의 각 요소를 가리킴
  
  

💡 Virtual DOM

• 리액트는 실제 DOM을 직접 수정하지 않고, 메모리에 존재하는 가상 DOM 객체를 먼저 갱신
• 가상 DOM은 실제 DOM과 동일한 구조를 가진 자바스크립트 객체의 복사본이라고 생각하면 됨
• 실제 DOM을 다루는 것은 비용이 크지만, JS 객체를 메모리에서 수정하는 것은 훨씬 가벼움

💡 화면 갱신 과정

예) 좋아요 버튼을 누르면 하트 색상이 변해야 함

1. state 변경 → 새로운 Virtual DOM 생성

   컴포넌트의 상태가 바뀌면 리액트는 변경된 UI 구조를 담은 새로운 가상 DOM을 만듦

2. Diffing (차이 비교)

   기존 가상 DOM과 새 가상 DOM을 비교하여 달라진 부분을 찾음

3. Reconciliation (재조정)

   바뀐 부분만 실제 DOM에 반영
   
   이때 변경 사항을 모아서 한 번에 처리하는데, 이를 **Batch Update**라고 함
   
   > **Batch Update의 장점**
   > 
   > 
   > 예) 버튼 클릭 한 번으로 5개의 요소가 동시에 바뀜
   > 
   > - **실제 DOM 직접 수정**: 5번의 갱신 발생
   > - **Virtual DOM + Batch Update**: 변경 사항을 모아 1번만 실제 DOM에 반영

   
   

💡 브라우저 렌더링 (페인팅)

• 리액트가 DOM을 업데이트했다고 해서 화면에 바로 보이는 것은 아님
• 실제 화면에 그려주는 단계는 브라우저 렌더링(혹은 페인팅) 과정
• 브라우저는 다음과 같은 순서로 화면을 그림
  1. 스타일 계산: HTML + CSS를 분석해 각 요소의 스타일을 결정
  2. 레이아웃(Layout): 요소들의 크기와 위치를 계산
  3. 페인팅(Painting): 계산된 결과를 실제 픽셀로 화면에 그리기

즉, 리액트 렌더링은 어떤 UI를 DOM에 반영할지 결정하는 단계이고,
브라우저 렌더링은 DOM의 변경 사항을 실제 화면에 그려내는 단계

---