📉 과도한 메모이제이션(Memoization) 남용: 불필요한 복잡성과 오버헤드

Why Wrong?

How to Fix?

// src/components/ProductList.jsx
import React, { useState, useMemo, useCallback } from 'react';

// ProductListItem은 React.memo로 감싸져있지 않아 콜백 함수의 참조 안정화가 큰 의미가 없음
const ProductListItem = ({ product, onAddToCart }) => {
  // console.log(`Rendering ProductListItem: ${product.name}`); // 불필요한 렌더링 확인용
  return (
    <li>
      {product.name} - ${product.price}
      <button onClick={() => onAddToCart(product.id)}>Add to Cart</button>
    </li>
  );
};

function ProductList({ products }) {
  const [searchTerm, setSearchTerm] = useState('');

  // 🙅‍♀️ 불필요한 useMemo 1: 간단한 필터링 로직에 오버헤드 추가
  const filteredProducts = useMemo(() => {
    // console.log('Filtering products with useMemo...');
    return products.filter(product =>
      product.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [products, searchTerm]); // 의존성 배열 변경 시마다 비교 연산 수행

  // 🙅‍♀️ 불필요한 useCallback 1: ProductListItem이 React.memo로 감싸져 있지 않아 콜백 참조 안정화의 이점이 없음
  const handleAddToCart = useCallback((productId) => {
    console.log(`Added product ${productId} to cart`);
  }, []); // 의존성 배열이 비어있어 함수 참조가 변하지 않지만, 불필요한 오버헤드 발생

  // 🙅‍♀️ 불필요한 useMemo 2: 배열 길이 계산 같은 아주 간단한 계산에 오버헤드 추가
  const totalItemsCount = useMemo(() => {
    // console.log('Calculating total items with useMemo...');
    return filteredProducts.length;
  }, [filteredProducts]); // 이 역시 간단한 계산이라 useMemo가 필요 없을 수 있음

  return (
    <div>
      <input
        type="text"
        placeholder="Search products..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <h2>Products ({totalItemsCount} items)</h2>
      <ul>
        {filteredProducts.map(product => (
          <ProductListItem key={product.id} product={product} onAddToCart={handleAddToCart} />
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

// src/components/ProductList.jsx
import React, { useState } from 'react'; // useMemo, useCallback 훅 제거

// ProductListItem은 React.memo로 감싸져있지 않아 콜백 함수의 참조 안정화가 큰 의미가 없음
const ProductListItem = ({ product, onAddToCart }) => {
  // console.log(`Rendering ProductListItem: ${product.name}`);
  return (
    <li>
      {product.name} - ${product.price}
      <button onClick={() => onAddToCart(product.id)}>Add to Cart</button>
    </li>
  );
};

function ProductList({ products }) {
  const [searchTerm, setSearchTerm] = useState('');

  // ✅ 간단한 필터링 로직은 useMemo 없이 직접 실행
  // (데이터 양이 매우 많아 계산 비용이 높은 경우에만 useMemo 고려)
  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  // ✅ 자식 컴포넌트가 React.memo로 감싸져 있지 않다면 useCallback 불필요
  // (함수 자체가 복잡하거나, 다른 곳에서 참조 안정화가 필요한 경우가 아니라면)
  const handleAddToCart = (productId) => {
    console.log(`Added product ${productId} to cart`);
  };

  // ✅ 간단한 계산은 useMemo 없이 직접 수행
  const totalItemsCount = filteredProducts.length;

  return (
    <div>
      <input
        type="text"
        placeholder="Search products..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <h2>Products ({totalItemsCount} items)</h2>
      <ul>
        {filteredProducts.map(product => (
          <ProductListItem key={product.id} product={product} onAddToCart={handleAddToCart} />
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

You Might Also Like