React 19 Compiler 도입 후 번들 크기 12% 감소

배경

회사 대시보드 프로젝트에 React 19 Compiler를 적용했다. 기존 코드베이스에 useMemo와 useCallback이 과도하게 사용되고 있었는데, Compiler가 자동으로 메모이제이션을 처리해준다는 점이 매력적이었다.

적용 과정

npm install react@19 react-dom@19
npm install -D babel-plugin-react-compiler

바벨 설정에 플러그인을 추가했다.

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      target: '19'
    }]
  ]
}

리팩토링

기존 코드에서 불필요한 useMemo/useCallback을 제거했다.

// Before
const filteredData = useMemo(() => 
  data.filter(item => item.active), [data]
);

const handleClick = useCallback(() => {
  setCount(c => c + 1);
}, []);

// After
const filteredData = data.filter(item => item.active);

const handleClick = () => {
  setCount(c => c + 1);
};

결과

• 번들 크기: 1.2MB → 1.06MB (12% 감소)
• 코드 라인 수: 약 300줄 감소
• Lighthouse 성능 점수: 82 → 87

주의사항

컴파일러가 최적화하지 못하는 케이스도 있었다. 특히 외부 라이브러리와의 통합 부분에서는 여전히 명시적 메모이제이션이 필요했다. React DevTools Profiler로 확인하면서 점진적으로 적용하는 것을 추천한다.

전체적으로는 만족스러운 결과였다. 코드가 간결해지고 성능도 개선됐다.