수동 memo 가 여전히 밥값 할 때

Compiler 가 손으로 쓰던 memoization 의 95% 커버. 남은 5% 가 알 가치 — 거기가 useMemo, useCallback, React.memo 의 세심한 적용이 여전히 도움 되는 자리.

케이스 1 — non-React API 의 referential identity

Identity 로 prop 비교하는 Web Component (또는 Three.js, Web Worker 브리지) 에 콜백 전달. Compiler 가 React 의 reconciler 용 memoize — 다만 외부 API 가 자기 equality 체크. 수동 useCallback 가 외부 라이브러리가 기대하는 방식으로 reference 안정 보장.

케이스 2 — 비싼 순수 계산

Compiler 가 입력이 React-추적 (prop, state) 인 값 memoize. 외부/imperative 출처에서 계산된 값 (DOM 측정, Date.now(), import 된 lookup 테이블) 은 계산이 진짜 비싸면 수동으로 useMemo 로 감싸. Compiler 가 보수적 아냐; 그냥 좁음.

케이스 3 — 리스트 아이템의 React.memo

각 row 가 적당히 비싼 긴 리스트: Row 를 React.memo 로 감싸면 sibling row 업데이트 시 개별 row 가 re-render 안 함. Compiler 가 가끔 추론 가능 — 다만 명시적 React.memo 가 여전히 가장 명확한 신호 + Compiler 활성화 무관하게 동작.

케이스 4 — Compiler 활성화 안 됨

모든 프로젝트가 Compiler 켠 거 아냐. 그게 없는 코드베이스에 기여 중이면 수동 memoization 이 가진 유일한 도구. 코드베이스 스타일 매치.

수동 memo 가 이제 정밀 도구, 디폴트 반사 아님. Compiler 전: 혹시 모르니 다 감쌈. Compiler 와: 특정 이유 있을 때만 감쌈 — non-React API, 프로파일된 hot spot, 비싼 row 리스트, Compiler 없는 코드베이스. 디폴트 뒤집힘.

Code

React.memo 있는 리스트 아이템 — 여전히 유용·tsx

import { memo } from "react";

type Item = { id: string; label: string };

// memo 없으면: 모든 부모 re-render 가 안 바뀐 Row 포함 모든 Row re-render.
// memo 있으면: Row 가 자기 특정 prop 바뀔 때만 re-render.
const Row = memo(function Row({ item, onClick }: {
  item: Item;
  onClick: (id: string) => void;
}) {
  return (
    <li onClick={() => onClick(item.id)} className="px-3 py-2 hover:bg-bg-elevated">
      {item.label}
    </li>
  );
});

function List({ items, onItemClick }: { items: Item[]; onItemClick: (id: string) => void }) {
  return (
    <ul>
      {items.map((item) => <Row key={item.id} item={item} onClick={onItemClick} />)}
    </ul>
  );
}

// (Compiler 활성화 시 onItemClick 자동으로 안정 — 다만 큰 리스트의
// row 레벨에선 React.memo 가 여전히 밥값 함.)

Exercise

각 row 가 클릭 핸들러 가진 500 아이템 리스트 빌드. React.memo 없이 DevTools Profiler 에서 row 하나 클릭이 모든 row re-render 하는 거 (부모가 re-render 하니까) 관찰. Row 를 React.memo 로 감쌈. 다시 프로파일 + 클릭된 row 만 re-render 하는지 확인. 그 다음 Compiler 활성화하고 도움 되는지 또는 React.memo 가 여전히 밥값 하는지 관찰.

Hint

Compiler 가 콜백 안정성 도움 (memo 의 prop 비교 성공) — 다만 memo 래퍼가 prop 안 바뀌었을 때 자식이 re-render 안 하게 막는 거. 같이 합성.

수동 memo 가 여전히 밥값 할 때

케이스 1 — non-React API 의 referential identity

케이스 2 — 비싼 순수 계산

케이스 3 — 리스트 아이템의 React.memo

케이스 4 — Compiler 활성화 안 됨

Code

External links

Exercise

Progress

댓글 0