Transition

Transition

앱의 업데이트 중에 응답성을 유지하는데 도움을 주는 v18에 새롭게 추가된 API

• 특정 업데이트를 "Transition"을 표시하여 사용자 인터렉션을 크게 향상시킬 수 있다.

• 상태 전환 중에 시각적 피드백을 제공하고 전환하는 동안 브라우저 응답성을 유지할 수 있다.

• 리엑트에게 어떤 업데이트가 긴급한지(urgent) 아닌지(transition)를 알려주어 업데이트의 우선순위를 정할 수 있게 된다.

응답성이란?

앱이 업데이트되거나 다른 작업을 수행하는 동안에도 사용자가 앱을 계속 사용할 수 있고, 앱이 끊김 없이 작동하는 상태를 의미한다.

import { startTransition } from 'react';

// urgent update → 기존 사용하는 방식 그대로
setInputValue(value);

// transition update
startTransition(() => {
  setSearchResult(value)
})

• startTransition() 으로 래핑된 업데이트는 긴급하지 않은것으로 처리되며 다른 긴급한 업데이트가 호출되면 작업을 중단한다.

• transition 업데이트가 보류되면 완료되지 않은 오래된 렌더링 작업을 날리고 최신 업데이트만 렌더링한다.

• Transition을 사용했을 때 UI가 크게 변경되더라도 대부분의 상호작용을 빠르게 유지 가능하다.

• 더이상 관련없는 컨텐츠를 렌더링하는데 시간을 낭비하지 않게 된다.

보류 중인 Transition update

• 우선순위가 밀려 보류 중인 업데이트는 isPending 플래그를 통해 상태를 확인할 수 있다.

import { useTransition } from 'react';

const { isPending, startTransition } =  useTransition();

{ isPending && <Spinner /> }

React 18 이전에는 동일한 작업을 어떻게 처리했을까?

• setTimeout을 사용하여 호출을 뒤로 미루거나

• state를 두개로 나누어 debounce로 업데이트 주기를 다르게 가져가는 방식을 자주 사용

• 위 두 방식 모두 이벤트 처리가 Schedule 되어 있고 뒤로 밀리는 것이기 때문에 이벤트가 끝나도 계속 결과를 표출하게 됨

  • Transition은 보류되면 이전 작업을 제거한다.