본문 바로가기
Frontend2026년 5월 20일3분 읽기

Million.js v4 은퇴 — React Compiler 1.0 이후 재평가

YS
김영삼
조회 940
Million.js v4 은퇴 — React Compiler 1.0 이후 재평가

핵심 요약

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 v4RC 1.0 only
번들(gzip)187KB173KB
리스트 1만 행 렌더72ms78ms
인터랙션 p95120ms118ms

대형 리스트는 약간 느려졌지만 가상화(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

아직 댓글이 없습니다.
Ctrl+Enter로 등록