[react 번역] startTransition

출처: https://react.dev/reference/react/startTransition

개요

startTransition은 UI의 일부를 백그라운드에서 렌더링하도록 상태 업데이트를 트랜지션(Transition)으로 표시하는 React API입니다. 트랜지션으로 표시된 업데이트는 비차단(non-blocking)으로 처리되어, 입력 등 긴급한 UI 반응성을 유지할 수 있습니다.

startTransition(action);

Reference

`startTransition(action)`

상태 업데이트를 트랜지션으로 감싸 비차단(non-blocking)으로 처리합니다.

파라미터
- action: 하나 이상의 set 함수로 상태를 업데이트하는 함수. 이 함수 내에서 동기적으로 발생한 모든 상태 업데이트가 트랜지션으로 표시됩니다. 비동기(await) 이후의 set 함수는 별도의 startTransition으로 감싸야 트랜지션으로 처리됩니다(아래 caveat 참고).
반환값
- 반환값 없음(void)

Caveats(주의사항)

startTransition은 트랜지션이 진행 중인지 추적할 수 있는 isPending 플래그를 제공하지 않습니다. 진행 상태를 표시하려면 useTransition을 사용하세요.
set 함수에 직접 접근할 수 있을 때만 트랜지션으로 감쌀 수 있습니다. prop이나 커스텀 훅의 반환값 등에서는 useDeferredValue를 고려하세요.
action 함수는 즉시 호출되며, 이 안에서 발생한 동기적 상태 업데이트만 트랜지션으로 처리됩니다. setTimeout 등 비동기 컨텍스트에서 발생한 업데이트는 트랜지션으로 처리되지 않습니다.
await 이후의 set 함수는 별도의 startTransition으로 감싸야 트랜지션으로 처리됩니다(향후 개선 예정).
트랜지션으로 표시된 상태 업데이트는 다른 상태 업데이트에 의해 중단(interrupt)될 수 있습니다. 예를 들어, 트랜지션 중에 input 입력이 발생하면, 트랜지션 렌더링이 중단되고 입력 처리가 우선됩니다.
트랜지션 업데이트는 input 등 제어 컴포넌트의 값을 직접 변경하는 데 사용할 수 없습니다.
여러 트랜지션이 동시에 발생하면 React가 현재는 모두 하나로 묶어 처리합니다(향후 개선 예정).

사용법

상태 업데이트를 비차단 트랜지션으로 표시하기

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}