React.memo와 React Profiler로 성능 분석 및 최적화

// App.js

import React, { useState } from 'react';

const ExpensiveComponent = React.memo(({ count }) => {
  console.log('ExpensiveComponent 렌더링');
  return <p>Count: {count}</p>;
});

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

  return (
    <div>
      <h1>React.memo와 Profiler 예제</h1>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something..."
      />
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
      <ExpensiveComponent count={count} />
    </div>
  );
}

export default App;