React 렌더링 원리 파헤치기 Virtual DOM과 Fiber - React, 알고 쓰자 1일차

Demystifying React Rendering Virtual DOM & Fiber - React Explained Day 1

• 실제 DOM
  : 웹 브라우저가 화면을 그릴 때 직접 사용하는 진짜 설계도입니다. 변경하려면 비용(시간과 자원)이 많이 듭니다.
• Virtual DOM
  : 실제 DOM의 모습을 따라 만든 가벼운 복사본입니다. 메모리 안에서 빠르게 만들고 수정할 수 있습니다. 마치 건물을 짓기 전에 만드는 미니어처 모델과 같아요.

• Diffing
  : 이전 Virtual DOM과 새로운 Virtual DOM을 비교하는 과정입니다. React는 이 과정을 아주 빠르게 처리할 수 있도록 최적화되어 있습니다.
• Reconciliation
  : 변경된 부분을 실제 DOM에 적용하는 과정입니다. React는 이 과정을 통해 최소한의 작업으로 화면을 업데이트합니다.

1. 다른 타입의 노드
   만약 비교하는 두 노드의 태그 이름(예: <div>와 <span>)이나 컴포넌트 타입(예: <LoginButton>과 <LogoutButton>)이 다르면, React는 이전 트리를 완전히 버리고 새로운 트리로 완전히 교체합니다.
2. 같은 타입의 DOM 엘리먼트
   두 노드의 태그 이름이 같다면(예: 둘 다 <div>), React는 속성(attributes)만 비교해서 바뀐 속성만 실제 DOM에 업데이트합니다. 예를 들어 className이나 style이 바뀌었다면 그것만 바꿔주는 거죠.
3. 같은 타입의 컴포넌트 엘리먼트
   두 노드가 같은 타입의 컴포넌트라면(예: 둘 다 <Button>), React는 컴포넌트 인스턴스는 그대로 유지하고 내부 상태(state)와 속성(props)만 업데이트합니다. 그리고 이 컴포넌트에 대해서 다시 재조정 과정을 진행합니다.
4. 리스트와 Key 속성
   여러 개의 자식 요소들을 처리할 때(예: 목록), React는 기본적으로 순서대로 비교합니다. 하지만 리스트 중간에 요소가 추가되거나 삭제되면 비효율이 발생할 수 있어요. 이때 key라는 특별한 속성을 사용하면, React가 각 요소를 고유하게 식별해서 훨씬 빠르고 정확하게 변경 사항을 찾아낼 수 있습니다. 이 key에 대해서는 잠시 후에 더 자세히 알아보겠습니다.

reconciliation flow

const todoItems = todos.map((todo) =>
  <li>{todo.text}</li>
);

[
  { id: 1, text: '장보기' },
  { id: 2, text: '운동하기' }
]

<ul>
  <li>장보기</li>
  <li>운동하기</li>
</ul>

[
  { id: 3, text: '책 읽기' }, // 새로 추가
  { id: 1, text: '장보기' },
  { id: 2, text: '운동하기' }
]

1. 이전 첫 번째 <li>장보기</li>와 현재 첫 번째 <li>책 읽기</li>를 비교합니다. 내용이 다르므로 '장보기'를 '책 읽기'로 업데이트합니다.
2. 이전 두 번째 <li>운동하기</li>와 현재 두 번째 <li>장보기</li>를 비교합니다. 내용이 다르므로 '운동하기'를 '장보기'로 업데이트합니다.
3. 현재 세 번째 <li>운동하기</li>가 새로 생겼으므로, 마지막에 추가합니다.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>{todo.text}</li> // key 속성 추가
);

1. React는 key가 3인 '책 읽기' 항목이 새로 추가된 것을 바로 알아챕니다.
2. key가 1인 '장보기' 항목과 key가 2인 '운동하기' 항목은 그대로 유지된 것을 확인합니다. 내용 변경도 없습니다.

const [items, setItems] = useState(['A', 'B', 'C']);
return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

• 0번 index가 A → C로 바뀌지만,
• React는
  동일한 key = 0
  를 가진 요소로 인식하여 기존 DOM을 재사용하게 됩니다.

• 잘못된 내용 표시
• 입력 폼 초기화 오류
• 애니메이션 이상 현상
• 불필요한 DOM 업데이트 발생

const items = [
  { id: 'a1', name: 'A' },
  { id: 'b2', name: 'B' },
  { id: 'c3', name: 'C' },
];
return (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

• 리스트 항목이 절대로 변경되지 않는 경우
• 리스트가 정적이고 고유한 ID를 가질 수 없는 경우
• 예: 짧고 변하지 않는 단순 리스트 (['월', '화', '수'] 등)

import React from 'react';
function MyApp() {
  return (
    <React.StrictMode>
      <ComponentOne />
      <ComponentTwo />
    </React.StrictMode>
  );
}

import { startTransition } from 'react';
 
function handleClick() {
  startTransition(() => {
    setState(newState);
  });
}
 
// ... <button onClick={handleClick}>Update State</button>

다음 시간에는 React에서 상태를 관리하는 가장 기본적인 방법인 useState 훅이 내부적으로 어떻게 동작하는지 자세히 알아보겠습니다.

• React 공식 문서 - Reconciliation: https://reactjs.org/docs/reconciliation.html↗
• React 공식 문서 - Fiber Architecture: (공식 문서에는 명시적인 Fiber 아키텍처 설명 페이지는 없지만, 관련 개념들이 곳곳에 설명되어 있습니다.)
• React Blog - React v16.0: https://reactjs.org/blog/2017/09/26/react-v16.0.html↗ (Fiber 도입 소개)
• React Blog - React v18.0: https://reactjs.org/blog/2022/03/29/react-v18.html↗ (Concurrent Features 소개)