startTransition

소개

startTransition은 UI의 일부를 백그라운드에서 렌더링할 수 있게 해주는 함수예요.

startTransition(action)

---

레퍼런스 {/reference/}

startTransition(action) {/starttransition/}

startTransition 함수를 사용하면 상태 업데이트를 트랜지션(Transition)으로 표시할 수 있어요.

import { startTransition } from 'react';

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

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

아래에서 더 많은 예제를 확인해보세요.

매개변수 {/parameters/}

• action: 하나 이상의 set 함수를 호출해서 상태를 업데이트하는 함수예요. React는 매개변수 없이 action을 즉시 호출하고, action 함수 호출 중에 동기적으로 예약된 모든 상태 업데이트를 트랜지션으로 표시해요. action 안에서 await로 기다리는 비동기 호출도 트랜지션에 포함되지만, 현재로서는 await 이후의 set 함수들을 추가적인 startTransition으로 감싸야 해요 (문제 해결 참고). 트랜지션으로 표시된 상태 업데이트는 논블로킹(non-blocking)이 되고, 원치 않는 로딩 인디케이터를 표시하지 않아요.

반환값 {/returns/}

startTransition은 아무것도 반환하지 않아요.

주의사항 {/caveats/}

• startTransition은 트랜지션이 진행 중인지 추적하는 방법을 제공하지 않아요. 트랜지션이 진행되는 동안 대기 중(pending) 인디케이터를 보여주려면, useTransition을 대신 사용해야 해요.

• 해당 상태의 set 함수에 접근할 수 있을 때만 업데이트를 트랜지션으로 감쌀 수 있어요. 어떤 prop이나 커스텀 Hook의 반환값에 대한 응답으로 트랜지션을 시작하고 싶다면, useDeferredValue를 대신 사용해보세요.

• startTransition에 전달하는 함수는 즉시 호출되고, 실행되는 동안 발생하는 모든 상태 업데이트를 트랜지션으로 표시해요. 예를 들어, setTimeout 안에서 상태 업데이트를 수행하려고 하면, 트랜지션으로 표시되지 않아요.

• 비동기 요청 이후의 모든 상태 업데이트는 또 다른 startTransition으로 감싸야 트랜지션으로 표시돼요. 이건 알려진 제한사항이고, 앞으로 수정할 예정이에요 (문제 해결 참고).

• 트랜지션으로 표시된 상태 업데이트는 다른 상태 업데이트에 의해 중단될 수 있어요. 예를 들어, 트랜지션 안에서 차트 컴포넌트를 업데이트하고 있는데, 차트가 리렌더링되는 도중에 input에 타이핑을 시작하면, React는 input 상태 업데이트를 처리한 후에 차트 컴포넌트의 렌더링 작업을 다시 시작해요.

• 트랜지션 업데이트는 텍스트 input을 제어하는 데 사용할 수 없어요.

• 여러 개의 트랜지션이 동시에 진행 중이면, React는 현재 그것들을 함께 배치(batch)해요. 이건 제한사항이고, 향후 릴리스에서 제거될 수도 있어요.

---

사용법 {/usage/}

상태 업데이트를 논블로킹 트랜지션으로 표시하기 {/marking-a-state-update-as-a-non-blocking-transition/}

상태 업데이트를 startTransition 호출로 감싸면 트랜지션으로 표시할 수 있어요:

import { startTransition } from 'react';

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

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

트랜지션을 사용하면 느린 기기에서도 사용자 인터페이스 업데이트가 반응성을 유지할 수 있어요.

트랜지션을 사용하면, 리렌더링 중간에도 UI가 반응성을 유지해요. 예를 들어, 사용자가 탭을 클릭했다가 마음이 바뀌어서 다른 탭을 클릭하면, 첫 번째 리렌더링이 끝나기를 기다리지 않고도 바로 그렇게 할 수 있어요.

참고

startTransition은 useTransition과 매우 비슷한데, 트랜지션이 진행 중인지 추적하는 isPending 플래그를 제공하지 않는다는 점이 달라요. useTransition을 사용할 수 없을 때 startTransition을 호출할 수 있어요. 예를 들어, startTransition은 데이터 라이브러리에서처럼 컴포넌트 바깥에서도 동작해요.

트랜지션에 대해 배우고 useTransition 페이지에서 예제를 확인해보세요.