V8 엔진의 메모리 관리 전략: 세대별 힙 구조와 GC 알고리즘의 진화 (상편)

// V8 내부 객체 구조 (단순화)
class HeapObject {
  Map* map_;           // Hidden Class 포인터 (4/8 바이트)
  Properties* props_;  // 동적 속성 저장소
  Elements* elements_; // 배열 요소 저장소
  // ... 인라인 속성들
};

V8 Heap (총 크기: nn MB ~ n GB)
├── Young Generation (1-32MB)
│   ├── Nursery (Semi-space 1)
│   ├── Intermediate (Semi-space 2)  
│   └── Survivor Space
├── Old Generation
│   ├── Old Object Space
│   ├── Code Space (실행 가능 코드)
│   ├── Map Space (Hidden Classes)
│   └── Large Object Space (>256KB 객체)
└── Non-movable Spaces
    ├── Read-only Space
    └── Shared Space (cross-isolate)

// Pretenuring 예시 - V8이 패턴을 학습
function createLargeObject() {
  return new Array(1000000); // 여러 번 호출 시 Old Space 직접 할당
}

// 단순화된 쓰기 배리어
if (is_old_object(obj) && is_young_object(value)) {
  remembered_set.insert(obj_address);
}

// React Fiber 노드 구조 (단순화)
class FiberNode {
  constructor(element) {
    this.type = element.type;
    this.key = element.key;
    this.props = element.props;
    
    // 이 참조들이 문제의 핵심
    this.child = null;      // 자식 Fiber
    this.sibling = null;    // 형제 Fiber
    this.return = null;     // 부모 Fiber
    this.alternate = null;  // 이전 렌더링의 Fiber (더블 버퍼링)
    
    // 오래 살아남는 참조들
    this.memoizedState = null;     // Hooks 상태
    this.memoizedProps = null;     // 이전 props
    this.updateQueue = null;        // 업데이트 큐
  }
}

// 실제 React 앱에서의 Fiber 트리
const fiberRoot = {
  current: rootFiber,        // 현재 트리 (Old Generation으로 승격)
  workInProgress: null,      // 작업 중인 트리 (Young Generation)
  pendingTime: 0,
  finishedWork: null
};

// 흔한 메모리 누수 패턴
function ExpensiveComponent() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    // 이 클로저가 전체 컴포넌트 스코프를 캡처
    const timer = setInterval(() => {
      setData(prev => [...prev, generateLargeObject()]);
    }, 1000);
    
    // cleanup 함수를 잊으면 메모리 누수
    return () => clearInterval(timer);
  }, []); // 의존성 배열이 비어있어도 클로저는 생성됨
  
  // 각 렌더링마다 새로운 함수 생성 (Young Generation 압박)
  const handleClick = useCallback(() => {
    // 이 함수는 data 전체를 클로저로 캡처
    console.log(data.length);
  }, [data]);
}

// V8이 최적화하기 어려운 Hook 패턴
function useComplexState() {
  const [state, setState] = useState(() => {
    // 이 초기화 함수는 한 번만 실행되지만
    // V8은 이를 예측하기 어려워함
    return createExpensiveInitialState();
  });
  
  // Hook의 연결 리스트 구조가 GC에 부담
  const hook = {
    memoizedState: state,
    queue: updateQueue,
    next: nextHook  // 다음 Hook 참조
  };
}

// Virtual DOM 객체 생성 패턴
function createElement(type, props, ...children) {
  return {
    $$typeof: REACT_ELEMENT_TYPE,
    type,
    key: props?.key || null,
    ref: props?.ref || null,
    props: { ...props, children },
    _owner: currentOwner  // Fiber 참조
  };
}

// 매 렌더링마다 생성되는 임시 객체들
function render() {
  // 이 모든 객체가 Young Generation에 생성됨
  return (
    <div className="container">
      {items.map(item => (
        <Item 
          key={item.id}
          data={item}
          onClick={() => handleClick(item.id)}
        />
      ))}
    </div>
  );
  // Reconciliation 후 대부분 즉시 버려짐
}

// Reconciliation 중 생성되는 작업 객체들
const updatePayload = {
  type: 'UPDATE',
  fiber: currentFiber,
  partialState: newState,
  callback: commitCallback,
  next: null  // Update 큐의 연결 리스트
};

// React DevTools가 추가하는 메모리 오버헤드
if (__DEV__) {
  // 각 Fiber에 디버깅 정보 추가
  fiber._debugSource = element._source;
  fiber._debugOwner = element._owner;
  fiber._debugHookTypes = hookTypes;
  
  // 프로파일링을 위한 타이밍 정보
  fiber.actualDuration = 0;
  fiber.actualStartTime = 0;
  fiber.selfBaseDuration = 0;
  fiber.treeBaseDuration = 0;
}

// 메모리 프로파일링 최적화 전략
class MemoryOptimizedComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    // 불필요한 렌더링 방지로 Virtual DOM 생성 감소
    return !shallowEqual(this.props, nextProps);
  }
  
  componentDidMount() {
    // WeakMap 사용으로 GC 친화적 캐싱
    this.cache = new WeakMap();
  }
  
  componentWillUnmount() {
    // 명시적 정리로 메모리 누수 방지
    this.cache = null;
    this.subscription?.unsubscribe();
  }
}

// React 18의 자동 배치 처리
function handleMultipleUpdates() {
  // 이전: 각 setState가 별도 렌더링 트리거
  // 현재: 자동으로 배치 처리되어 GC 부하 감소
  setCount(c => c + 1);
  setFlag(f => !f);
  setItems(i => [...i, newItem]);
}

// Suspense와 메모리 관리
const LazyComponent = React.lazy(() => {
  // 동적 import로 초기 메모리 사용량 감소
  return import('./HeavyComponent');
});

// useDeferredValue로 우선순위 기반 렌더링
function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);
  
  // 긴급하지 않은 업데이트는 지연 처리
  // Young Generation 부하 분산
  return <ExpensiveList query={deferredQuery} />;
}

// Facebook에서 사용하는 메모리 최적화 패턴
const RecyclerListView = {
  // 객체 풀링으로 GC 압력 감소
  viewPool: [],
  
  getView() {
    return this.viewPool.pop() || this.createView();
  },
  
  releaseView(view) {
    view.reset();
    this.viewPool.push(view);
  }
};

// Relay의 GC 친화적 캐시 전략
class RelayCache {
  constructor() {
    // WeakMap으로 자동 메모리 관리
    this.records = new WeakMap();
    
    // TTL 기반 만료로 Old Generation 증가 방지
    this.ttl = 5 * 60 * 1000; // 5분
  }
  
  gc() {
    // 주기적으로 오래된 레코드 정리
    const now = Date.now();
    for (const [key, record] of this.records) {
      if (now - record.fetchTime > this.ttl) {
        this.records.delete(key);
      }
    }
  }
}

// Cheney 알고리즘 의사 코드
void scavenge() {
  scan = next = to_space.bottom;
  // 1. 루트 스캐닝
  for (root in roots) {
    *root = copy(*root);
  }
  // 2. 너비 우선 탐색
  while (scan < next) {
    for (slot in slots_in(scan)) {
      *slot = copy(*slot);
    }
    scan += object_size(scan);
  }
}

// Tri-color invariant
enum MarkColor {
  WHITE = 0,  // 미방문, 회수 대상
  GREY = 1,   // 방문했으나 자식 미처리
  BLACK = 2   // 방문 완료, 살아있음
};

// 증분 마킹을 위한 Barrier 
void WriteBarrier(HeapObject* obj, Object** slot, Object* value) {
  if (marking_state == INCREMENTAL &&
      IsBlack(obj) && IsWhite(value)) {
    // tri-color 위반
    MarkGrey(value);  // 불변성 유지
    marking_worklist.Push(value);
  }
}