React Compiler 정식화 - 이제 useMemo·useCallback 수동 최적화는 그만

한 줄 요약 - React가 성능 최적화를 자동으로 해주는 'React Compiler'를 도입하면서, 그동안 손으로 챙기던 useMemo/useCallback/memo를 대부분 안 써도 됩니다.

무슨 일이에요?

리액트는 상태가 바뀌면 컴포넌트를 다시 그립니다. 불필요한 재계산과 재렌더를 막으려고 개발자가 직접 useMemo(값 기억)/useCallback(함수 기억)을 붙여왔는데, React Compiler는 빌드 시점에 코드를 분석해 어떤 값이 언제 바뀌는지 파악하고 필요한 곳에 메모이제이션을 자동으로 넣어줍니다.

핵심 코드

이전에는 이렇게 손으로 감쌌습니다.

// before: 수동 최적화
const visible = useMemo(
  () => items.filter((i) => i.active),
  [items]
);
const handleClick = useCallback(() => {
  setOpen(true);
}, []);

React Compiler를 켜면 평범하게 써도 컴파일러가 알아서 최적화합니다.

// after: 그냥 이렇게 써도 됨
const visible = items.filter((i) => i.active);
const handleClick = () => setOpen(true);

설정은 빌드 플러그인만 추가하면 됩니다.

// babel / vite / next 설정에 플러그인 추가
plugins: ['babel-plugin-react-compiler']

왜 중요해요?

코드가 단순해지고, 의존성 배열(deps)을 빼먹어 생기던 버그가 크게 줄어듭니다.
최적화를 기본값으로 깔고 가므로 초보자도 성능 함정에 덜 빠집니다.
단, 컴파일러는 리액트 규칙(Rules of Hooks, 순수 함수)을 지킨 코드에서만 안전합니다. eslint-plugin-react-hooks로 점검하세요.

지금 해볼 것

새 프로젝트면 React 19 + 컴파일러 플러그인을 켜고 시작하세요.
기존 프로젝트는 일부 화면부터 점진 적용하고, 동작이 같은지 확인하며 useMemo/useCallback을 걷어내면 됩니다.

무슨 일이에요?

핵심 코드

왜 중요해요?

지금 해볼 것

댓글