useTransition

useTransition
useTransition은 React의 훅(hook)으로, UI 업데이트를 긴급하지 않은 것으로 표시해서, 사용자가 입력하는 동안 화면이 멈추거나 끊기는 현상 없이 매끄럽게 UI를 전환할 수 있게 해준다.
특히 데이터 페칭(fetching)이나 복잡한 계산처럼 시간이 걸리는 업데이트를 처리할 때 유용하다.

역할

useTransition은 두 가지 주요 기능을 제곤한다.
1. isPending 상태
  - 이 상태는 전환이 진행 중인지를 알려준다.
  - useTransition을 호출하면 [isPending, startTransition] 배열을 반환하는데, isPending이 true일 때는 전환이 시작되었음을, false일 때는 완료되었음을 의미한다.
  - 이 상태를 이용해 로딩 스피너(spinner) 같은 시각적 피드백을 사용자에게 보여줄 수 있다.
2. startTransition 함수
  - 이 함수는 느린 상태 업데이트를 감싸는 역할을 한다.
  - startTransition으로 감싼 업데이트는 긴급하지 않은 것으로 간주되어, React가 다른 긴급한 업데이트(예: 사용자 입력)를 먼저 처리하도록 허용한다.

사용 방법

useTransition은 아래와 같이 사용할 수 있다.

import { useState, useTransition } from 'react';

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

  function selectTab(nextTab) {
    // startTransition을 사용해 느린 상태 업데이트를 감쌉니다.
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <div>
      <button onClick={() => selectTab('about')}>About</button>
      <button onClick={() => selectTab('posts')}>Posts</button>
      <button onClick={() => selectTab('contact')}>Contact</button>

      {isPending && <p>로딩 중...</p>}
      {tab === 'about' && <About />}
      {tab === 'posts' && <Posts />}
      {tab === 'contact' && <Contact />}
    </div>
  );
}

위 예시에서 selectTab 함수 내부의 setTab 업데이트는 startTransition으로 감싸져 있다.
따라서 사용자가 'Posts' 탭을 클릭했을 때, 'Posts' 컴포넌트가 렌더링되는 데 시간이 걸리더라도 React는 다른 긴급한 작업을 우선 처리할 수 있다.
그동안 isPending이 true가 되어 '로딩 중...' 메시지를 보여줄 수 있다.