대규모 리스트 렌더링 최적화

src/
├── App.js
├── index.css (기본 스타일)
├── components/
│   ├── ProductList.js
│   └── ProductItem.js

// src/components/ProductItem.js
import React from 'react';

function ProductItem({ product, onItemClick }) {
  // 이 로그로 컴포넌트의 렌더링 시점을 확인합니다.
  console.log(`ProductItem [${product.name}] 렌더링됨`);

  return (
    <li
      style={{
        padding: '10px',
        margin: '5px 0',
        backgroundColor: '#f9f9f9',
        border: '1px solid #eee',
        borderRadius: '4px',
        cursor: 'pointer'
      }}
      onClick={() => onItemClick(product.name)}
    >
      {product.name} - ${product.price}
    </li>
  );
}

export default ProductItem;

// src/components/ProductList.js
import React from 'react';
import ProductItem from './ProductItem';

const ALL_PRODUCTS = [
  { id: 1, name: 'Laptop', price: 1200 },
  { id: 2, name: 'Mouse', price: 25 },
  { id: 3, name: 'Keyboard', price: 75 },
  { id: 4, name: 'Monitor', price: 300 },
  { id: 5, name: 'Webcam', price: 50 },
  { id: 6, name: 'Microphone', price: 80 },
  { id: 7, name: 'Headphones', price: 150 },
  { id: 8, name: 'USB Drive', price: 15 },
];

function ProductList({ filterTerm }) {
  console.log('ProductList 렌더링됨'); // 렌더링 시점 확인

  // 🚨 1. 필터링 로직: 매 렌더링마다 이 계산이 다시 실행됨
  const filteredProducts = ALL_PRODUCTS.filter(product =>
    product.name.toLowerCase().includes(filterTerm.toLowerCase())
  );

  // 🚨 2. 클릭 핸들러: 매 렌더링마다 이 함수가 재생성됨
  const handleItemClick = (productName) => {
    alert(`Clicked: ${productName}`);
  };

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', marginBottom: '20px', backgroundColor: '#fff' }}>
      <h3>상품 목록</h3>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {filteredProducts.map(product => (
          // 🚨 ProductItem에 handleItemClick 함수가 매번 새로운 참조로 전달됨
          <ProductItem key={product.id} product={product} onItemClick={handleItemClick} />
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

// src/App.js
import React, { useState } from 'react';
import './index.css'; // 기본 스타일 임포트 (Chapter 9에서 사용한 스타일 사용)
import ProductList from './components/ProductList';

function App() {
  const [globalCounter, setGlobalCounter] = useState(0); // 다른 상태 (불필요한 리렌더링 유발용)
  const [filterTerm, setFilterTerm] = useState(''); // 상품 목록 필터링 용도

  console.log('App 컴포넌트 렌더링됨');

  return (
    <div className="main-content">
      <h1 style={{ textAlign: 'center', color: 'var(--header-color)' }}>성능 최적화 실습</h1>

      <div style={{ marginBottom: '20px', padding: '15px', border: '1px solid #ddd', borderRadius: '8px', backgroundColor: '#fff' }}>
        <h2>앱 전체 상태 제어</h2>
        <p>글로벌 카운터: {globalCounter}</p>
        <button onClick={() => setGlobalCounter(prev => prev + 1)} className="button">
          글로벌 카운터 증가 (App 리렌더링)
        </button>
      </div>

      <div style={{ marginBottom: '20px', padding: '15px', border: '1px solid #ddd', borderRadius: '8px', backgroundColor: '#fff' }}>
        <h2>상품 필터링</h2>
        <input
          type="text"
          placeholder="상품 검색..."
          value={filterTerm}
          onChange={(e) => setFilterTerm(e.target.value)}
          style={{ width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px', boxSizing: 'border-box' }}
        />
      </div>

      {/* ProductList 컴포넌트 */}
      <ProductList filterTerm={filterTerm} />
    </div>
  );
}

export default App;

// src/components/ProductItem.js (최적화 버전)
import React from 'react';

// ✅ React.memo로 감싸서 프롭스가 변경될 때만 리렌더링되도록 최적화
const ProductItem = React.memo(function ProductItem({ product, onItemClick }) {
  console.log(`ProductItem [${product.name}] 렌더링됨 (Memoized)`);

  return (
    <li
      style={{
        padding: '10px',
        margin: '5px 0',
        backgroundColor: '#f9f9f9',
        border: '1px solid #eee',
        borderRadius: '4px',
        cursor: 'pointer'
      }}
      onClick={() => onItemClick(product.name)}
    >
      {product.name} - ${product.price}
    </li>
  );
});

export default ProductItem;

// src/components/ProductList.js (최적화 버전)
import React, { useMemo, useCallback } from 'react'; // useMemo, useCallback 임포트
import ProductItem from './ProductItem';

const ALL_PRODUCTS = [
  { id: 1, name: 'Laptop', price: 1200 },
  { id: 2, name: 'Mouse', price: 25 },
  { id: 3, name: 'Keyboard', price: 75 },
  { id: 4, name: 'Monitor', price: 300 },
  { id: 5, name: 'Webcam', price: 50 },
  { id: 6, name: 'Microphone', price: 80 },
  { id: 7, name: 'Headphones', price: 150 },
  { id: 8, name: 'USB Drive', price: 15 },
];

// ✅ React.memo로 감싸서 filterTerm이 변경될 때만 리렌더링되도록 최적화
const ProductList = React.memo(function ProductList({ filterTerm }) {
  console.log('ProductList 렌더링됨 (Memoized)'); // 렌더링 시점 확인

  // ✅ 1. 필터링 로직: filterTerm이 변경될 때만 다시 계산하도록 useMemo 사용
  const filteredProducts = useMemo(() => {
    console.log('상품 필터링 계산됨'); // 계산 시점 확인
    return ALL_PRODUCTS.filter(product =>
      product.name.toLowerCase().includes(filterTerm.toLowerCase())
    );
  }, [filterTerm]); // filterTerm이 변경될 때만 재계산

  // ✅ 2. 클릭 핸들러: useCallback을 사용하여 함수 재생성 방지
  const handleItemClick = useCallback((productName) => {
    alert(`Clicked: ${productName}`);
  }, []); // 의존성 배열이 비어있으므로 컴포넌트 마운트 시 한 번만 생성됨 (productName은 인자로 받음)

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', marginBottom: '20px', backgroundColor: '#fff' }}>
      <h3>상품 목록</h3>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {filteredProducts.map(product => (
          // ✅ ProductItem은 이제 메모이제이션된 함수 프롭스를 받으므로 불필요한 리렌더링이 줄어듦
          <ProductItem key={product.id} product={product} onItemClick={handleItemClick} />
        ))}
      </ul>
    </div>
  );
});

export default ProductList;

// src/App.js (변경 없음)
import React, { useState } from 'react';
import './index.css';
import ProductList from './components/ProductList';

function App() {
  const [globalCounter, setGlobalCounter] = useState(0);
  const [filterTerm, setFilterTerm] = useState('');

  console.log('App 컴포넌트 렌더링됨');

  return (
    <div className="main-content">
      <h1 style={{ textAlign: 'center', color: 'var(--header-color)' }}>성능 최적화 실습</h1>

      <div style={{ marginBottom: '20px', padding: '15px', border: '1px solid #ddd', borderRadius: '8px', backgroundColor: '#fff' }}>
        <h2>앱 전체 상태 제어</h2>
        <p>글로벌 카운터: {globalCounter}</p>
        <button onClick={() => setGlobalCounter(prev => prev + 1)} className="button">
          글로벌 카운터 증가 (App 리렌더링)
        </button>
      </div>

      <div style={{ marginBottom: '20px', padding: '15px', border: '1px solid #ddd', borderRadius: '8px', backgroundColor: '#fff' }}>
        <h2>상품 필터링</h2>
        <input
          type="text"
          placeholder="상품 검색..."
          value={filterTerm}
          onChange={(e) => setFilterTerm(e.target.value)}
          style={{ width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px', boxSizing: 'border-box' }}
        />
      </div>

      <ProductList filterTerm={filterTerm} />
    </div>
  );
}

export default App;