useTransition과 useDeferredValue 같은 concurrent 기능은 무엇인가요?

Question

Accepted Answer

Concurrent React는 렌더링 작업을 **중단, 일시 정지, 우선순위 지정**할 수 있습니다. 일부 업데이트를 **긴급하지 않은 transition**으로 표시하여, 무거운 re-render가 대기 중일 때도 긴급한 업데이트(타이핑 등)가 반응성을 유지하도록 합니다.

## useTransition

```jsx
const [isPending, startTransition] = useTransition();

function onChange(e) {
  setQuery(e.target.value);          // 긴급: 입력을 빠르게 유지
  startTransition(() => {
    setResults(filterBigList(e.target.value)); // 비긴급: 중단될 수 있음
  });
}
// isPending으로 은은한 "업데이트 중…" 표시를 보여줄 수 있음
```

**왜 도움이 되는가:** 거대한 리스트를 필터링하는 것은 비용이 큽니다. transition 없이는 React가 수천 개의 행을 re-render하는 동안 입력을 차단하여 타이핑이 느리게 느껴집니다. 비용이 큰 업데이트를 `startTransition`으로 감싸면, React는 입력 업데이트를 높은 우선순위로 유지하고 또 다른 키를 누르면 진행 중인 필터 render를 **버릴** 수 있습니다 — 오래되고 끊긴 프레임이 없습니다.

## useDeferredValue

setter를 제어할 수 없을 때의 더 간단한 대안 — 값의 "지연된" 복사본을 제공합니다:

```jsx
const deferredQuery = useDeferredValue(query); // 긴급 작업이 안정된 후 업데이트
const results = useMemo(() => filterBigList(deferredQuery), [deferredQuery]);
```

## 언제 사용하는가

빠른 사용자 입력에 의해 구동되는 **비용이 큰, 긴급하지 않은 UI 업데이트**에 사용하세요: 큰 데이터셋에 대한 입력 즉시 검색, 무거운 콘텐츠를 render하는 탭 전환, 크게 필터링/정렬된 테이블. 간단한 앱에서는 불필요합니다 — render가 보이는 입력 지연을 유발할 만큼 무거울 때 빛을 발합니다.