7관문. Transition API

관문 7 / 7

무거운 필터링 연산을 startTransition으로 비긴급 처리하여 입력 응답성을 유지하라.

📖 이론 비급

Transition API: 긴급과 비긴급의 분리

모든 상태 업데이트가 동등한 우선순위를 갖는다고 가정하면, 무거운 리렌더가 사용자 입력을 블로킹한다.

startTransition: 업데이트를 "비긴급"으로 표시하면 리액트가 중간에 인터럽트할 수 있다. 긴급 업데이트(타이핑)가 들어오면 진행 중인 비긴급 렌더를 포기하고 즉시 처리한다. useTransition의 isPending으로 로딩 UI를 표시할 수 있다.

⚔️ 수련 코드

import { useState, useTransition } from 'react';

const ITEMS = Array.from({ length: 20000 }, (_, i) => `item-${i}`);

export default function FilterList() {
  const [query, setQuery] = useState('');
  const [filtered, setFiltered] = useState(ITEMS);
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    const value = e.target.value;
    setQuery(value);
    // TODO: 필터링을 startTransition으로 감싸 비긴급 처리하라
    setFiltered(ITEMS.filter(item => item.includes(value)));
  }

  return (
    <div>
      <input value={query} onChange={handleChange} placeholder="검색..." />
      {isPending && <p>필터링 중...</p>}
      <ul>{filtered.slice(0, 50).map(i => <li key={i}>{i}</li>)}</ul>
    </div>
  );
}

Open Sandbox