List 렌더 최적화 (memo + useCallback)

#37ReactHard

List 렌더 최적화 (memo + useCallback)

List 렌더링 최적화

<List items onPick onUnrelated /> 컴포넌트가 있습니다. 부모의 unrelated 상태가 바뀔 때마다 모든 Item이 재렌더되는 문제를 해결하세요.

요구사항

Item은 React.memo로 감싸야 합니다.
onPick 콜백은 useCallback으로 안정화되어야 합니다 (또는 의존성이 변하지 않는 함수).
items 자체가 변하지 않고 onPick 참조가 같으면 unrelated 상태가 바뀌어도 Item은 재렌더되지 않아야 합니다.
각 Item은 renderSpy(id)를 호출하여 테스트가 렌더 횟수를 셀 수 있게 합니다.

시그니처

type Item = { id: string; label: string };
function List(props: {
  items: Item[];
  renderSpy: (id: string) => void;
}): JSX.Element;

학습 포인트

React.memo + 안정적 props 참조 = 재렌더 스킵
useCallback의 진짜 가치는 자식 메모이제이션 보존
renderSpy 패턴으로 렌더 횟수 단위 테스트

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

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

type ItemProps = {
  item: Item;
  onPick: (id: string) => void;
  renderSpy: (id: string) => void;
};

// TODO: Item을 React.memo로 감싸세요.
// renderSpy(item.id)는 컴포넌트 본문에서 호출해 렌더 횟수를 외부에서 셀 수 있게 합니다.
function ItemBase({ item, onPick, renderSpy }: ItemProps) {
  renderSpy(item.id);
  return (
    <li>
      <button onClick={() => onPick(item.id)}>{item.label}</button>
    </li>
  );
}

export const Item = ItemBase; // TODO: React.memo(ItemBase)로 교체하세요

export function List({
  items,
  renderSpy,
}: {
  items: Item[];
  renderSpy: (id: string) => void;
}) {
  const [picked, setPicked] = useState<string | null>(null);
  const [unrelated, setUnrelated] = useState(0);

  // TODO: onPick을 useCallback으로 안정화하세요. setPicked는 stable이므로 의존성 [] 로 충분합니다.
  const onPick = (id: string) => setPicked(id);

  return (
    <div>
      <span data-testid="picked">{picked ?? 'none'}</span>
      <span data-testid="unrelated">{unrelated}</span>
      <button onClick={() => setUnrelated(n => n + 1)}>bump</button>
      <ul>
        {items.map(item => (
          <Item key={item.id} item={item} onPick={onPick} renderSpy={renderSpy} />
        ))}
      </ul>
    </div>
  );
}

Open Sandbox

Sandpack 로드 중…

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

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

type ItemProps = {
  item: Item;
  onPick: (id: string) => void;
  renderSpy: (id: string) => void;
};

// TODO: Item을 React.memo로 감싸세요.
// renderSpy(item.id)는 컴포넌트 본문에서 호출해 렌더 횟수를 외부에서 셀 수 있게 합니다.
function ItemBase({ item, onPick, renderSpy }: ItemProps) {
  renderSpy(item.id);
  return (
    <li>
      <button onClick={() => onPick(item.id)}>{item.label}</button>
    </li>
  );
}

export const Item = ItemBase; // TODO: React.memo(ItemBase)로 교체하세요

export function List({
  items,
  renderSpy,
}: {
  items: Item[];
  renderSpy: (id: string) => void;
}) {
  const [picked, setPicked] = useState<string | null>(null);
  const [unrelated, setUnrelated] = useState(0);

  // TODO: onPick을 useCallback으로 안정화하세요. setPicked는 stable이므로 의존성 [] 로 충분합니다.
  const onPick = (id: string) => setPicked(id);

  return (
    <div>
      <span data-testid="picked">{picked ?? 'none'}</span>
      <span data-testid="unrelated">{unrelated}</span>
      <button onClick={() => setUnrelated(n => n + 1)}>bump</button>
      <ul>
        {items.map(item => (
          <Item key={item.id} item={item} onPick={onPick} renderSpy={renderSpy} />
        ))}
      </ul>
    </div>
  );
}

Open Sandbox