Million.js

1. Million.js란?

Million.js는 React 애플리케이션의 성능을 향상시키기 위한 컴파일러와 런타임 최적화 라이브러리이다.

기존 React 코드에 최소한의 변경만으로도 상당한 성능 향상을 제공하는 드문 라이브러리 중 하나이다.

React의 가상 DOM 위에 추가적인 성능 최적화 층을 제공하여 동작한다

 

 

2. 작동 원리

1) 선택적 재렌더링 방식

Million.js는 일반 React의 재조정(reconciliation) 과정을 개선한 '선택적 가험반 재조정' 방식을 사용한다.

React는 상태가 변경되면 컴포넌트 트리를 처음부터 다시 완성하고 차이점을 찾는데 반해, Million.js는 변경된 부분만 선택적으로 재렌더링한다.

 

2) 블록 컨셉(Block)

Million.js의 핵심은 '블록(Block)'이라는 개념이다.

블록은 정적 JSX 구조와 동적 값을 분리하여, 변경된 동적 값만 업데이트한다.

이는 트리 비교 대신 데이터 비교만 수행하여 성능을 크게 향상시킨다.

 

3) 컴파일 시간 최적화

Million.js는 빌드 시에 JSX를 분석하고 최적화한다.

정적 JSX 구조는 미리 분석되어 성능 향상을 위한 코드로 변환된다.

 

 

3. 주요 기능 (Million.js 3.0)

1) 자동 JSX 최적화

Million.js 3.0부터는 자동 JSX 수정 기능이 추가되어 기존 React 코드를 변경하지 않아도 성능 향상이 가능해졌다.

이는 Million.js가 자동으로 컴포넌트를 분석하고 최적화 해주기 때문에 가능하다.

 

2) Block 최적화

자동 최적화만으로도 성능 향상이 있지만, block 컴포넌트를 명시적으로 지정하면 더 큰 성능 향상을 만들 수 있다.

import { block } from 'million/react';

// 일반 컴포넌트를 block으로 감싸서 최적화
// 정적인 JSX 구조의 컴포넌트에 가장 효과적
// 렌더링 시 바뀐 값만 선택적으로 업데이트

const OptimizedComponent = block(function Component(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Today is {props.date}</p>
    </div>
  );
});

 

3) 작은 번들 크기

Million.js는 매우 가벼운 라이브러리로, gzip 압축 시 전체 크기가 2KB 미만이다.

이는 성능 향상을 위해 불필요한 부담을 추가하지 않는다는 장점이 있다.

 

 

4. 주의사항

1) 모든 컴포넌트를 block으로 감싸는 것은 바람직하지 않음

동적으로 구조가 자주 변경되는 컴포넌트나 내부에 조건부 렌더링이 많은 컴포넌트에는 효과가 제한적일 수 있다.

대신, 정적 JSX 구조를 가진 컴포넌트에 선택적으로 사용하는 것이 좋다.

 

2) 효과가 높은 사용 사례

• 리스트 렌더링: 많은 항목을 렌더링하는 목록
• 변화가 적은 UI 컴포넌트: 카드, 아이템 요소 등
• 텍스트, 숫자 등 단순한 값만 변경되는 컴포넌트