핵심 요약
Million.js가 v4.2를 끝으로 신규 기능 개발을 종료한다고 공식 발표(2026-05). React Compiler 1.0이 자동 메모이제이션을 처리하면서 Million의 핵심 가치 일부가 흡수됐기 때문. 6개월 운영하던 사내 앱 두 곳에서 Million을 제거하고 RC 1.0만 남긴 결과, 번들 14KB 감소·렌더 성능 유사(±3%).
1. 무엇이 일어났나
Million의 블록 가상 DOM은 대규모 리스트에서 효과적이었지만, 일반 컴포넌트에서는 React Compiler가 같은 효과를 코드 변경 없이 낸다. 메인테이너의 발표 요지는 "RC가 80%를 해결한다, 남은 20%는 별도 라이브러리로 분리".
2. 우리 코드에서의 영향
| 지표 | Million v4 | RC 1.0 only |
|---|---|---|
| 번들(gzip) | 187KB | 173KB |
| 리스트 1만 행 렌더 | 72ms | 78ms |
| 인터랙션 p95 | 120ms | 118ms |
대형 리스트는 약간 느려졌지만 가상화(virtual list)를 따로 쓰는 게 정공법.
3. 마이그레이션
# 1) million 의존성 제거
pnpm remove million
# 2) babel/vite 플러그인 제거
# vite.config.ts
- import million from "million/compiler";
- plugins: [million.vite({auto: true}), react()]
+ plugins: [react()] // RC는 babel-plugin-react-compiler 추가
# 3) <For> 컴포넌트 → 일반 .map() 또는 react-window
4. 대형 리스트 — react-window 권장
1만 행 이상 테이블은 RC만으론 부족. react-window 또는 TanStack Virtual로 가상화. 가상화 + RC 조합이 Million보다 일관되게 빠르다.
5. RC 1.0 자체 함정
- 커스텀 훅의 명명 규칙(
use*) 엄격 — eslint-plugin-react-compiler 필수 - 레퍼런스 패턴(
ref.current)에 민감, 일부 라이브러리와 충돌 → 보고된 PR 다수 - RSC와 함께 쓰면 클라이언트 컴포넌트에만 적용
6. 결정 가이드
- Million 사용 중 → 4.x로 잠금 유지하거나 6개월 내 제거
- 신규 프로젝트 → RC 1.0 + 가상화 라이브러리
- 차트·시각화 강한 페이지 → Canvas/WebGL 분리 검토
자주 묻는 질문
Q. Million v4 보안 패치는? 메인테이너가 24개월 보안 패치 약속. 그 이후는 fork 권장.

댓글 0