useTransition 파헤치기

useTransition 이란?

UI를 차단하지 않고 state를 업데이트할 수 있는 React 훅이다.

useTransition, 언제 사용해야 할까

상태의 변경에 따른 UI 변경이 렌더링의 진행과 관계 없이 비동기 적으로 반영되어야 하는 경우, 원치 않는 로딩 표시를 제거하고 싶은 경우, 라우터를 구축하는 경우 등에서 사용하면 좋다. 자세한 내용은 아래의 사용법 부분을 참고하자.

useTransition 의 구성

const [isPending, startTransition] = useTransition();

Parameters

useTransition은 매개변수를 받지 않는다.

Returns

1. isPending 은 보유 중인 트랜지션이 있는지 여부를 알려주는 플래그다.

2. startTransition 은 state 업데이트를 트랜지션으로 표시할 수 있는 함수다.

사용시 주의사항

• useTransition은 훅이기 때문에 컴포넌트나 커스텀 훅 내부에서만 호출이 가능하다.
  다른 곳(예: 데이터 라이브러리)에서 트랜지션을 시작해야 하는 경우, 독립형 startTransition을 호출하면 된다.

• 해당 state의 set함수에 접근할 수 있는 경우에만 트랜지션으로 감쌀 수 있다.

• startTransition에 전달하는 함수는 동기식이어야 한다. React는 이 함수를 즉시 실행하여, 실행하는 동안 발생하는 모든 state 업데이트를 트랜지션으로 표시한다.

• 트랜지션으로 표시된 state 업데이트는 다른 state 업데이트에 의해 중단된다.
  ex) 트랜지션 내에서 차트 컴포넌트를 업데이트한 다음, 차트가 다시 렌더링되는 도중에 입력을 시작하면 React는 입력 업데이트를 처리한 후 차트 컴포넌트에서 렌더링 작업을 다시 시작한다.

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

• 진행중인 트랜지션이 여러 개 있는 경우, React는 현재 트랜지션을 함께 일괄 처리한다.

사용법

1. state 업데이트를 논블로킹 트랜지션으로 표시하기

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

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

트랜지션을 사용하면 리렌더링 도중에도 UI가 반응성을 유지한다.
ex) 사용자가 탭을 클릭했다가 마음이 바뀌어 다른 탭을 클릭하면 첫 번째 리렌더링이 완료될 때까지 기다릴 필요 없이 다른 탭을 클릭할 수 있습니다.

2. 트랜지션에서 상위 컴포넌트 업데이트하기

export default function TabButton({ children, isActive, onClick }) {
  const [isPending, startTransition] = useTransition();
  if (isActive) {
    return <b>{children}</b>
  }
  return (
    <button onClick={() => {
      startTransition(() => {
        onClick();
      });
    }}>
      {children}
    </button>
  );
}

1번 케이스와 거의 동일하지만 set함수가 상위 컴포넌트에서 prop drilling 되었다는 부분만 차이가 있다.
따라서 상위 컴포넌트의 set함수 또한 useTransition을 통해 처리가 가능하다.

3. 트랜지션 중에 ‘보류중’ state 표시하기

function TabButton({ children, isActive, onClick }) {
  const [isPending, startTransition] = useTransition();
  // ...
  if (isPending) {
    return <b className="pending">{children}</b>;
  }
  // ...

isPending을 활용해서 현재 로딩중이라는 표시를 해줄 수 있다.

4. 원치 않는 로딩 표시 방지하기

원래는 표시 되었어야 할 로딩 표시가 어색하게 느껴진다면 useTransition을 사용해서 로딩표시를 건너뛰게 만들어 자연스럽게 표현이 가능하다.
ex) suspense 컴포넌트를 사용해 만든 UI에서 fallback prop으로 아예 컴포넌트 자체가 로딩 화면으로 변경될 경우 유저 입장에서 어색함을 느낄 수가 있는데 useTransition을 통해서 이를 막을 수 있다.

5. Suspense 가 도입된 라우터 구축하기

React 프레임워크나 라우터를 구축하는 경우 페이지 네비게이션을 트랜지션으로 표시하는 것을 권장하고 있다.

• 트랜지션은 중단 가능하므로, 사용자는 다시 렌더링이 완료될 때까지 기다리지 않고 바로 클릭할 수 있습니다.

• 트랜지션은 원치 않는 로딩 표시를 방지하여, 사용자가 네비게이션 시 갑작스럽게 이동 하는 것을 방지할 수 있습니다.