[React] 리액트 성능 최적화 (3): useMemo 연산 결과 박제

7. 똑똑한 리액트 성능 최적화 (3): useMemo와 값의 박제

useMemo는 복잡한 계산의 결과값(Value)을 메모리에 저장해두고, 의존성이 바뀔 때만 다시 계산하도록 만드는 훅임

useCallback이 함수 자체를 기억한다면, useMemo는 함수의 실행 결과인 값을 기억한다.

---

useMemo를 쓰는 진짜 이유

컴포넌트가 리렌더링될 때마다 내부에 있는 무거운 계산(예: 수천 개의 데이터 정렬, 복잡한 필터링)이 매번 다시 실행되는 것을 방지하기 위함이다.

❖ 값 재사용의 로직:

• 최초 계산: 컴포넌트가 처음 뜰 때 함수를 실행하여 결과값을 저장함
• 캐싱: 리렌더링 시 "이전과 바뀐 게 없네?"라고 판단되면 계산 과정을 생략하고 저장된 값을 즉시 꺼내옴

useMemo는 "결과가 뻔한데 굳이 또 계산기 두드리지 마!"라고 명령하는 것과 같다.

---

실전 예시: 무거운 계산 최적화

import { useMemo } from 'react';

function ProductList({ products, filterTerm }) {
  // products나 filterTerm이 바뀔 때만 이 필터링 로직이 실행됨
  const filteredProducts = useMemo(() => {
    console.log("복잡한 필터링 계산 중...");
    return products.filter(p => p.name.includes(filterTerm));
  }, [products, filterTerm]); // 👈 의존성 배열

  return (
    <ul>
      {filteredProducts.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

---

### useMemo 작동 프로세스

1. 의존성 비교: 렌더링 시 배열 안의 products나 filterTerm이 이전과 다른지 확인한다.
2. 계산 건너뛰기: 값이 그대로라면 filter 함수를 실행하지 않고 이전 렌더링 때 얻은 리스트를 재사용한다.
3. 성능 이득: 매 렌더링마다 수천 번 돌던 루프를 0번으로 줄여 브라우저의 부담을 덜어준다.

---

### 최적화 도구 3인방 최종 정리

리액트 성능 최적화는 이 세 가지 도구의 조합으로 완성된다.

도구	목적	대상
React.memo	자식 컴포넌트 전체를 안 그리게 함	컴포넌트 (Component)
useCallback	자식에게 주는 함수 주소를 고정함	함수 (Function)
useMemo	연산 결과값을 저장하여 재계산을 막음	값 (Value)