프론트엔드 렌더링 최적화: 가상화 + memo

// 부모 리렌더 → 자식 모두 리렌더 (props 변화 무관)
function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <ExpensiveChild />  {/* 매번 리렌더 ❌ */}
    </div>
  );
}


// React.memo — props 변화 시만 리렌더
const ExpensiveChild = React.memo(() => {
  console.log('render');
  return <div>...</div>;
});

function Component({ items }: { items: Item[] }) {
  // ❌ 매 렌더마다 새 객체
  const sorted = items.sort((a, b) => a.name.localeCompare(b.name));


  // ✅ items 변화 시만
  const sorted = useMemo(
    () => items.toSorted((a, b) => a.name.localeCompare(b.name)),
    [items]
  );


  // ❌ 매 렌더마다 새 함수 → 자식 memo 무효화
  const handleClick = (id: string) => doSomething(id);


  // ✅
  const handleClick = useCallback((id: string) => {
    doSomething(id);
  }, []);


  return <ChildList items={sorted} onClick={handleClick} />;
}

React.memo 비용:
- props 비교 (얕은 비교 자동)
- 효과 미미한데 코드 복잡도 증가

언제 쓸 것인가:
1. 큰 리스트의 항목 (1000+)
2. 비싼 렌더 (차트·계산)
3. 자주 리렌더되는 부모의 자식


React DevTools Profiler로 측정 후 결정
"premature optimization is the root of all evil"

// 1만 항목 → DOM 1만 → 느림
import { useVirtualizer } from '@tanstack/react-virtual';

function LongList({ items }: { items: Item[] }) {
  const parentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
    overscan: 5,
  });

  return (
    <div ref={parentRef} style={{ height: 400, overflow: 'auto' }}>
      <div
        style={{
          height: virtualizer.getTotalSize(),
          position: 'relative',
        }}
      >
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.index}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: virtualRow.size,
              transform: `translateY(${virtualRow.start}px)`,
            }}
          >
            <ListItem item={items[virtualRow.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}


// → DOM 10개만 (보이는 부분 + overscan)
// → 1만 항목도 60fps

// React 19+ Compiler — 수동 memo 자동화
// .babelrc 또는 next.config.js
{
  "plugins": [
    "babel-plugin-react-compiler"
  ]
}


// 컴파일러가 자동 분석:
// - 어떤 값이 리렌더 시 변하는가
// - 자동으로 memoization 추가
// → 수동 useMemo/useCallback 불필요


// 단, 아직 베타 — 큰 프로젝트는 신중

// ❌ index를 key로 — 순서 변경 시 깨짐
{items.map((item, i) => <Item key={i} {...item} />)}


// ✅ 안정적 ID
{items.map(item => <Item key={item.id} {...item} />)}


// 추가 항목, 정렬, 필터 시:
// ❌ index → 모든 항목 리렌더 + state 꼬임
// ✅ id → 변경된 항목만 리렌더

// ❌ 큰 객체 통째로
<Component data={largeObject} />


// ✅ 필요한 것만
<Component name={largeObject.name} count={largeObject.count} />


// → memo 비교 빠름
// → 무관한 부분 변화 시 리렌더 X

import { lazy, Suspense } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));

<Suspense fallback={<Skeleton />}>
  <HeavyChart />
</Suspense>


// 라우트 단위
const Dashboard = lazy(() => import('./pages/Dashboard'));

/* ❌ 매 프레임 layout 트리거 */
.element {
  transition: width 0.3s;
}


/* ✅ GPU 가속 (transform·opacity) */
.element {
  transition: transform 0.3s;
}


/* will-change — GPU 힌트 (남발 X) */
.animated {
  will-change: transform;
}

import { Profiler } from 'react';

<Profiler id="App" onRender={(id, phase, actualDuration) => {
  if (actualDuration > 16) {  // 60fps = 16.67ms
    console.warn(`Slow render: ${id} ${phase} ${actualDuration}ms`);
  }
}}>
  <App />
</Profiler>