프론트엔드 안티패턴 (4) — 렌더링과 성능: 병목은 대개 리렌더가 아니다

const Row = React.memo(function Row({ item, onSelect }: RowProps) {
  const handleClick = useCallback(() => onSelect(item.id), [onSelect, item.id]);
  const style = useMemo(() => ({ opacity: item.active ? 1 : 0.5 }), [item.active]);
  const label = useMemo(() => `${item.name} (${item.code})`, [item.name, item.code]);
  return <div style={style} onClick={handleClick}>{label}</div>;
});

// 1. 목록의 행 — 수백 개가 있고, 그중 하나만 바뀜
const Row = React.memo(TableRow);
 
// 2. 렌더가 실제로 무거움 — 차트, 지도, 에디터
const Chart = React.memo(ExpensiveChart);
 
// 3. 자주 리렌더되는 부모 아래의 안정적인 자식
// (부모가 1초에 60번 리렌더되는데 자식은 안 바뀜)

const Row = React.memo(TableRow);
 
// 🔴 매 렌더 새 객체/함수 → 비교가 항상 실패
<Row item={item} config={{ dense: true }} onSelect={() => select(item.id)} />

// Before — 상태가 위에 있어서 전체가 리렌더
function Page() {
  const [query, setQuery] = useState('');
  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <ExpensiveTree />          {/* query와 무관한데 같이 리렌더된다 */}
    </>
  );
}
 
// After — 상태를 필요한 곳으로 내린다
function SearchBox() {
  const [query, setQuery] = useState('');
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}
function Page() {
  return <><SearchBox /><ExpensiveTree /></>;
}

// children으로 잘라내는 방법도 있다
function Provider({ children }) {
  const [state, setState] = useState();
  return <Ctx.Provider value={state}>{children}</Ctx.Provider>;
}
// children은 부모에서 이미 만들어진 엘리먼트라 Provider 리렌더에 영향받지 않는다

Chrome DevTools → Performance → ⚙️ → CPU: 4x slowdown / 6x slowdown
Network: Slow 4G

// 🔴 히어로 이미지에 lazy loading
<img src="/hero.jpg" loading="lazy" />
// → 첫 화면의 주인공을 늦게 로드하겠다는 선언
 
// ✅
<Image src="/hero.jpg" priority alt="..." />

// 🔴 클라이언트에서 데이터를 받아 렌더 — LCP 요소가 3초 뒤에 나타남
'use client';
function ProductPage() {
  const { data } = useQuery(...);       // 서버 응답 → 렌더
  if (!data) return <Skeleton />;
  return <h1>{data.title}</h1>;         // 이게 LCP 요소
}
 
// ✅ 서버에서 렌더
async function ProductPage() {
  const data = await getProduct(id);
  return <h1>{data.title}</h1>;
}

<!-- 🔴 렌더 블로킹 폰트 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/...">
<!-- CSS 다운로드 → 폰트 다운로드 → 그제서야 텍스트 표시 -->

// 🔴 크기 없는 이미지 — 로드되는 순간 아래 내용이 밀린다
<img src={url} alt="" />
 
// ✅ 공간을 미리 확보
<img src={url} width={800} height={600} alt="" />
// 또는 CSS로
// .thumb { aspect-ratio: 4 / 3; width: 100%; }

/* 🔴 font-display 미설정 — 폰트 교체 시 글자 크기가 바뀌며 레이아웃이 밀림 */
@font-face { font-family: 'Pretendard'; src: url(...); }
 
/* ✅ */
@font-face {
  font-family: 'Pretendard';
  src: url(...) format('woff2');
  font-display: swap;
  size-adjust: 102%;          /* 폴백 폰트와 크기를 맞춰 교체 시 밀림을 줄인다 */
}

// 🔴 나중에 나타나서 위쪽 내용을 밀어내는 요소
{showBanner && <Banner />}        // 배너가 나타나면 아래가 다 밀린다
 
// ✅ 자리를 미리 잡거나, 레이아웃 흐름 밖에 두기
<div style={{ minHeight: 56 }}>{showBanner && <Banner />}</div>

// 🔴 입력 핸들러에서 무거운 동기 작업
function handleSearch(e) {
  const q = e.target.value;
  const results = allItems.filter(i => fuzzyMatch(i, q));   // 50,000건
  setResults(results);      // 키 누를 때마다 200ms 블로킹
}
 
// ✅ 긴급하지 않은 업데이트를 분리
function handleSearch(e) {
  const q = e.target.value;
  setQuery(q);                          // 긴급: 입력창 반응
  startTransition(() => {
    setResults(allItems.filter(i => fuzzyMatch(i, q)));   // 비긴급
  });
}

// 🔴 클릭 핸들러에서 동기 작업 후 화면 갱신
function handleExport() {
  const csv = rows.map(toCsvLine).join('\n');   // 10,000행 — 메인 스레드 점유
  download(csv);
}
 
// ✅ 청크로 나누거나 워커로
async function handleExport() {
  const csv = await generateCsvInWorker(rows);
  download(csv);
}

// 🔴 읽기와 쓰기가 교차한다
elements.forEach(el => {
  const height = el.offsetHeight;          // 읽기 → 강제 동기 레이아웃
  el.style.height = `${height * 2}px`;     // 쓰기 → 레이아웃 무효화
});

// ✅ 읽기를 전부 먼저, 쓰기를 나중에
const heights = elements.map(el => el.offsetHeight);   // 리플로우 1회
elements.forEach((el, i) => {
  el.style.height = `${heights[i] * 2}px`;             // 배치 처리
});

/* 🔴 매 프레임 레이아웃 재계산 — 요소가 많으면 20fps */
.slide { transition: left 300ms; }
.slide.open { left: 0; }
 
/* ✅ 컴포지터 스레드에서 처리 — 메인 스레드를 안 건드림 */
.slide { transition: transform 300ms; }
.slide.open { transform: translateX(0); }

/* 🔴 모든 요소에 미리 걸어두기 — 각각 별도 레이어가 되어 메모리를 먹는다 */
* { will-change: transform; }
 
/* ✅ 애니메이션 직전에만, 끝나면 제거 */
.card:hover { will-change: transform; }

// 🔴 5,000행 — DOM 노드 5,000개 × 셀 8개 = 40,000 노드
<tbody>{rows.map(r => <Row key={r.id} row={r} />)}</tbody>

// ✅ 가상화 — 보이는 것만 렌더
import { useVirtualizer } from '@tanstack/react-virtual';
 
function VirtualTable({ rows }: { rows: Row[] }) {
  const parentRef = useRef<HTMLDivElement>(null);
  const virtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 44,
    overscan: 8,
  });
 
  return (
    <div ref={parentRef} style={{ height: 600, overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
        {virtualizer.getVirtualItems().map(v => (
          <div
            key={rows[v.index].id}
            style={{
              position: 'absolute', top: 0, left: 0, width: '100%',
              height: v.size, transform: `translateY(${v.start}px)`,
            }}
          >
            <Row row={rows[v.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}

// 🔴 원본 4000×3000 JPEG를 200×150으로 표시
<img src="/uploads/photo.jpg" className="w-[200px]" />

// ✅ 크기·포맷·반응형 처리
<Image
  src="/uploads/photo.jpg"
  width={200} height={150}
  sizes="(max-width: 768px) 100vw, 200px"
  alt="제품 사진"
/>

/* 🔴 웹폰트 6종 × 각 300KB = 1.8MB */
@font-face { font-family: 'X'; font-weight: 300; src: url(x-300.woff2); }
@font-face { font-family: 'X'; font-weight: 400; src: url(x-400.woff2); }
/* ... 400, 500, 600, 700, 800 ... */

/* ✅ 가변 폰트 하나 + 서브셋 */
@font-face {
  font-family: 'X';
  src: url('x-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+0020-007E;   /* 한글 완성형 + ASCII */
}

// 의존성 배열이 거짓말을 하면 메모이제이션이 낡은 값을 붙잡는다
const filtered = useMemo(
  () => rows.filter(r => r.status === status),
  [rows]                                          // 🔴 status가 빠졌다
);
// status를 바꿔도 결과가 안 바뀐다 — 디버깅이 매우 어렵다