useTransition

 

참고문서에 따르면 useTransition은 UI의 일부를 백그라운드에서 렌더링 할 수 있도록 해주는 React Hook이라고 한다.

즉, UI를 차단하지 않고 상태를 업데이트 할 수 있다.

https://ko.react.dev/reference/react/useTransition

useTransition – React

 

 

기본적인 형태는

const [isPending,startTransition]= useTransition();

 

1. isPending:  대기중인 transition이 있는지 알려준다.

2. startTransition : 상태 업데이트(setState)를 transition으로 표시해주는 함수다.

 

상태 변경의 우선순위를 낮춰 다른 렌더링이 더 빠르게 될 수 있도록 도와준다. 

react는 동기적 수행(= 1개 작업 1개 처리)을 하고 있으므로 렌더링이 종료될때까지 순차적으로 지연이 된다. 

따라서 useTransition 훅을 이용해 동시에 작업이 이루어지게 한다. 

 

목록페이지에서 등록 페이지로 이동할때 해당 훅을 사용한적이 있다.

  const [isManagerRegisterPending, startManagerRegisterTransition] =
    React.useTransition();
  
   const goRegister = () => {
    startManagerRegisterTransition(() => {
      router.push(LINK_ROUTE.DASHBOARD.COMPANY.ADMIN.REGISTER());
    });
  };

 

goRegister 함수는 버튼 클릭시 등록 페이지로 이동하는 함수다. 

isPending 상태를 통해 현재 startManagerRegisterTransition 작업이 진행중인지를 확인할 수 있다.

그래서 등록작업이 이루어질때 UI가 느려지거나 멈추는 것을 방지하여 사용자적으로(UI) 반응성 높은 경험을 제공하는 역할을 한다!

 

 const [updatePending, startUpdateTransition] = React.useTransition();

이와 같이 업데이트할때도 쓰인다.