1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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

function 계산컴포넌트() {
  const [숫자A, 숫자A설정] = useState(0);
  const [숫자B, 숫자B설정] = useState(0);
  
  // 비용이 많이 드는 계산을 useMemo로 최적화
  const 합계 = useMemo(
    // 첫 번째 인자: 계산 함수 - 메모이제이션할 값을 계산하고 반환합니다
    () => {
      console.log("합계 다시 계산중...");
      return 숫자A + 숫자B;
    }, 
    // 두 번째 인자: 의존성 배열 - 이 값들이 변경될 때만 위의 계산 함수가 다시 실행됩니다
    [숫자A, 숫자B]
  ); 
  
  return (
    <div>
      <input 
        type="number" 
        value={숫자A} 
        onChange={(e) => 숫자A설정(Number(e.target.value))} 
      />
      <input 
        type="number" 
        value={숫자B} 
        onChange={(e) => 숫자B설정(Number(e.target.value))} 
      />
      <p>합계: {합계}</p>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

function ParentComponent() {
  const [user, setUser] = useState({ name: 'John', age: 30 });
  
  // 안정화되지 않은 객체 - 매 렌더링마다 새 객체 생성됨
  const userInfo = { 
    name: user.name,
    details: `${user.name} is ${user.age} years old`,
    role: user.age >= 19 ? 'Adult' : 'Minor'
  }; // 매번 새로운 메모리 주소를 가진 객체 생성
  
  // useMemo로 객체 안정화 - user.name이나 user.age가 변경될 때만 새 객체 생성
  const memoizedUserInfo = useMemo(() => {
    return {
      name: user.name,
      details: `${user.name}님은 ${user.age}세입니다`,
      role: user.age >= 19 ? '성인' : '미성년자'
    };
  }, [user.name, user.age]); // 의존성 배열 - 이 값들이 변경될 때만 재계산
  
  return (
    <>
      {/* 매 렌더링마다 자식이 리렌더링됨 (비효율적) */}
      <ChildComponent userInfo={userInfo} />
      
      {/* user 정보가 변경될 때만 자식이 리렌더링됨 (효율적) */}
      <OptimizedChild userInfo={memoizedUserInfo} />
    </>
  );
}

// React.memo로 최적화된 자식 컴포넌트 - props가 변경될 때만 리렌더링
const OptimizedChild = React.memo(function({ userInfo }) {
  console.log("자식 컴포넌트 렌더링");
  return <div>{userInfo.details}</div>;
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

function ProductList({ products, searchTerm, category, sortBy }) {
  // 필터링 및 정렬된 상품 목록을 계산하고 메모이제이션
  const filteredProducts = useMemo(() => {
    console.log("상품 필터링 중..."); // 성능 측정용 로그
    
    // 1단계: 검색어와 카테고리로 필터링
    let result = products.filter(product => 
      product.name.toLowerCase().includes(searchTerm.toLowerCase()) && 
      (category === 'all' || product.category === category)
    );
    
    // 2단계: 정렬 기준에 따라 정렬
    if (sortBy === 'price-asc') {
      result = result.sort((a, b) => a.price - b.price); // 가격 오름차순
    } else if (sortBy === 'price-desc') {
      result = result.sort((a, b) => b.price - a.price); // 가격 내림차순
    } else if (sortBy === 'name') {
      result = result.sort((a, b) => a.name.localeCompare(b.name)); // 이름순
    }
    
    return result;
  }, [products, searchTerm, category, sortBy]); // 이 값들이 변경될 때만 재계산
  
  return (
    <div>
      <p>{filteredProducts.length}개 상품 찾음</p>
      <ul>
        {filteredProducts.map(product => (
          <li key={product.id}>{product.name} - {product.price}원</li>
        ))}
      </ul>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function WarningExampleComponent() {
  const [count, setCount] = useState(0);
  
  // 1. 간단한 계산에는 불필요 (과도한 사용 예시)
  const unnecessaryExample = useMemo(() => count + 10, [count]); 
  // 주의: 이런 간단한 계산은 useMemo 오버헤드가 더 클 수 있음
  
  // 2. 의존성 배열 관리 (잘못된 사용)
  const wrongDependencies = useMemo(() => {
    return calculateWithCount(count);
  }, []); // 버그 발생: count가 의존성 배열에 없어 값이 갱신되지 않음
  
  // 3. 올바른 사용 예시
  const correctExample = useMemo(() => {
    // 정말 무거운 계산만 여기에 넣기
    return expensiveCalculation(count);
  }, [count]); // 올바른 의존성: 원시값 직접 사용
  
  return (
    <div>
      <button onClick={() => setCount(prev => prev + 1)}>증가</button>
      <p>현재 카운트: {count}</p>
    </div>
  );
}