useTransition

상태 변화의 우선순위를 지정하기 위해 useTransition 훅이 새로 도입되었습니다. useTransition은 비동기 작업을 처리할 때 사용되며, 특히, 복잡한 상태 업데이트나 UI 렌더링이 필요할 때 해당 작업을 우선순위가 낮은 작업으로 처리하여 사용자 인터페이스가 끊김 없이 반응할 수 있도록 도와줍니다. 이를 통해 성능을 향상시키고, 사용자가 어떤 작업을 했을 때 즉각적인 반응을 볼 수 있게 해줍니다.

useTransition 반환값

• isPending : 상태 업데이트가 지연 중인지 여부를 나타내는 불리언 값.
• startTransition : 긴급하지 않은 상태 업데이트를 실행하는 함수.

const [isPending, startTransition] = useTransition();

const handleClick = () => {
  startTransition(() => {
    // 긴급하지 않은 상태 업데이트
    setState(newValue);
  });
};

useTransition의 동작 원리

useTransition의 내부 동작 원리는 React의 **동시성 모드(Concurrent Mode)**와 관련이 깊습니다. React 18에서 도입된 이 동시성 모드를 통해, React는 상태 업데이트와 렌더링 작업을 우선순위에 따라 관리할 수 있게 되었습니다. useTransition은 이러한 동시성 모드의 기능을 활용하여 상태 업데이트의 우선순위를 조절하고, 긴급하지 않은 작업을 비동기적으로 처리하는 방식으로 성능을 최적화합니다.

1 ) 상태 업데이트 우선순위 분리

useTransition을 사용하면 상태 업데이트 작업을 두 가지 우선순위로 나누어 처리할 수 있습니다.

• 높은 우선순위 작업 : 예를 들어, 사용자의 입력, 버튼 클릭 등과 같은 즉각적인 반응이 필요한 작업.
• 낮은 우선순위 작업 : 필터링, 리스트 정렬, 애니메이션 처리 등 긴급하지 않은 작업.

이러한 작업을 우선순위에 따라 분리함으로써 UI가 중요한 작업(예: 입력 처리)을 방해받지 않도록 하고, 덜 중요한 작업은 나중에 처리하게 됩니다.

2 ) startTransition 함수

startTransition은 긴급하지 않은 작업을 감싸서 처리하는 역할을 합니다. 이를 호출하면 React는 해당 상태 업데이트를 낮은 우선순위 작업으로 분류하여, 동시성 모드에서 처리할 수 있게 됩니다. 내부적으로 startTransition은 이 작업을 비동기적으로 스케줄링합니다.

useTransition의 특징