React - useMemo, useCallback, React.memo 최적화 예제

import React, { useMemo, useCallback, useState } from 'react';

const ExpensiveList = React.memo(({ data, onClick }) => {
  console.log('리렌더링: ExpensiveList');
  return data.map((item, i) => <div key={i} onClick={() => onClick(item)}>{item}</div>);
});

export default function OptimizationExample() {
  const [count, setCount] = useState(0);
  const data = useMemo(() => ['React', 'Next.js', 'JavaScript'], []);
  const handleClick = useCallback((item) => {
    console.log('클릭한 항목:', item);
  }, []);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>+</button>
      <ExpensiveList data={data} onClick={handleClick} />
    </div>
  );
}