[이제와서 시작하는 Next.js 마스터하기 #14] React Compiler로 자동 최적화

“useMemo? useCallback? 이제 필요 없습니다!” - React Compiler가 자동으로 최적화합니다!

🎯 이 글에서 배울 내용

• React Compiler가 무엇인지
• 자동 메모이제이션의 원리
• 성능 향상 측정 방법
• 마이그레이션 가이드

예상 소요 시간: 30분 난이도: 중급

---

🎨 React Compiler란?

컴파일 타임에 자동으로 최적화하는 도구

Before (수동 최적화)

const ExpensiveComponent = ({ data }) => {
  const computed = useMemo(() => {
    return heavyCalculation(data);
  }, [data]);

  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  return <div onClick={handleClick}>{computed}</div>;
};

After (React Compiler)

const ExpensiveComponent = ({ data }) => {
  const computed = heavyCalculation(data);  // 자동 메모이제이션!

  const handleClick = () => {
    console.log('clicked');
  };  // 자동 메모이제이션!

  return <div onClick={handleClick}>{computed}</div>;
};

---

🚀 활성화 방법

// next.config.js
module.exports = {
  experimental: {
    reactCompiler: true,
  },
};

---

📊 성능 측정

'use client';

import { useState } from 'react';

export default function PerformanceTest() {
  const [count, setCount] = useState(0);

  // 무거운 계산
  const expensiveValue = (() => {
    console.log('Calculating...');
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return result;
  })();

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

React Compiler 없이: “Calculating…” 매번 출력 React Compiler 사용: “Calculating…” 한 번만 출력

---

🎯 오늘 배운 내용 정리

1. React Compiler
   • 자동 메모이제이션
   • useMemo/useCallback 불필요
2. 활성화
   • next.config.js 설정
   • Next.js 16에서 안정화

---

📚 시리즈 네비게이션

• #13 Turbopack으로 개발 속도 향상
• #15 실전 프로젝트: 풀스택 블로그 플랫폼 (다음 편)

---

“최적화를 잊으세요. Compiler가 합니다!” 🎨