React Compiler — 자동 메모이제이션의 미래

React Compiler란

React Compiler는 useMemo, useCallback, React.memo를 자동으로 적용하는 컴파일러입니다.

Before & After

// Before (수동 최적화)
const MemoizedList = React.memo(({ items }) => {
  const sorted = useMemo(() => items.sort(), [items]);
  const handleClick = useCallback((id) => {
    selectItem(id);
  }, [selectItem]);
  return sorted.map(item => <Item key={item.id} onClick={handleClick} />);
});

// After (React Compiler가 자동 처리)
function List({ items }) {
  const sorted = items.sort();
  const handleClick = (id) => selectItem(id);
  return sorted.map(item => <Item key={item.id} onClick={handleClick} />);
}

개발자는 비즈니스 로직에만 집중할 수 있습니다.