// components/DataProcessor.tsx
import { useMemo } from 'react';

interface Props {
  items: number[];
}

export default function DataProcessor({ items }: Props) {
  // items가 변경될 때만 재계산
  const processedData = useMemo(() => {
    console.log('Processing data...');
    return items.map(item => item * 2).filter(item => item > 10);
  }, [items]);

  return (
    <div>
      <h3>Processed Data: {processedData.length} items</h3>
      <ul>
        {processedData.map((item, idx) => (
          <li key={idx}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

// components/Counter.tsx
import { useState, useCallback } from 'react';

interface ButtonProps {
  onClick: () => void;
  label: string;
}

const Button = ({ onClick, label }: ButtonProps) => {
  console.log(`Button "${label}" rendered`);
  return <button onClick={onClick}>{label}</button>;
};

export default function Counter() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // useCallback으로 함수 메모이제이션
  const increment = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={increment} label="Increment" />

      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something..."
      />
    </div>
  );
}

// components/ExpensiveChild.tsx
import { memo } from 'react';

interface Props {
  value: number;
  onUpdate: () => void;
}

const ExpensiveChild = memo(({ value, onUpdate }: Props) => {
  console.log('ExpensiveChild rendered');

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={onUpdate}>Update</button>
    </div>
  );
});

ExpensiveChild.displayName = 'ExpensiveChild';

export default ExpensiveChild;

// 개발자가 작성한 코드 (Before)
export default function TodoList({ todos, filter }) {
  const filteredTodos = todos.filter(todo => todo.status === filter);

  const handleToggle = (id) => {
    // toggle logic
  };

  return (
    <ul>
      {filteredTodos.map(todo => (
        <TodoItem key={todo.id} todo={todo} onToggle={handleToggle} />
      ))}
    </ul>
  );
}

// React Compiler가 변환한 코드 (After)
export default function TodoList({ todos, filter }) {
  // 자동으로 useMemo 추가
  const filteredTodos = useMemo(() =>
    todos.filter(todo => todo.status === filter),
    [todos, filter]
  );

  // 자동으로 useCallback 추가
  const handleToggle = useCallback((id) => {
    // toggle logic
  }, []);

  return (
    <ul>
      {filteredTodos.map(todo => (
        <TodoItem key={todo.id} todo={todo} onToggle={handleToggle} />
      ))}
    </ul>
  );
}

# React 19 canary 설치
npm install react@canary react-dom@canary

# React Compiler 설치
npm install --save-dev babel-plugin-react-compiler

// .babelrc
{
  "plugins": [
    ["babel-plugin-react-compiler", {
      "target": "19"
    }]
  ]
}

// next.config.js
const ReactCompilerConfig = {
  target: '19'
};

module.exports = {
  experimental: {
    reactCompiler: ReactCompilerConfig
  }
};

// 최적화 없음 (Baseline)
export default function ListBaseline({ items, filter }) {
  const filtered = items.filter(item => item.category === filter);
  const sorted = filtered.sort((a, b) => a.name.localeCompare(b.name));

  return (
    <ul>
      {sorted.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// 수동 최적화
export default function ListManual({ items, filter }) {
  const filtered = useMemo(() =>
    items.filter(item => item.category === filter),
    [items, filter]
  );

  const sorted = useMemo(() =>
    filtered.sort((a, b) => a.name.localeCompare(b.name)),
    [filtered]
  );

  return (
    <ul>
      {sorted.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// React Compiler 자동 최적화
export default function ListCompiler({ items, filter }) {
  // React Compiler가 자동으로 최적화
  const filtered = items.filter(item => item.category === filter);
  const sorted = filtered.sort((a, b) => a.name.localeCompare(b.name));

  return (
    <ul>
      {sorted.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// 보일러플레이트가 많은 코드
const filtered = useMemo(() => items.filter(f), [items, f]);
const sorted = useMemo(() => filtered.sort(s), [filtered, s]);
const handleClick = useCallback(() => onClick(id), [onClick, id]);

// 간결하고 읽기 쉬운 코드 (자동 최적화)
const filtered = items.filter(f);
const sorted = filtered.sort(s);
const handleClick = () => onClick(id);

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

// next.config.js - 특정 디렉토리만 Compiler 적용
module.exports = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation', // 주석으로 명시한 곳만 최적화
    }
  }
};

// 주석으로 React Compiler 적용 명시
'use memo'; // React Compiler가 이 컴포넌트를 최적화

export default function NewFeature() {
  // ...
}

// 성능 크리티컬 컴포넌트 - 수동 최적화
export default function RealtimeDashboard({ data }) {
  // 특정 필드만 의존성으로 지정 (세밀한 제어)
  const chartData = useMemo(() =>
    processChartData(data.values),
    [data.values] // data 전체가 아닌 values만 의존
  );

  return <Chart data={chartData} />;
}