useTransition

📌 useTransition이란?

useTransition은 ui를 차단하지 않고 state를 업데이트할 수 있는 React 훅입니다.

const [isPending, startTransition] = useTransition()

📌 useTransition

컴포넌트의 최상위 레벨에서 useTransition을 호출하여 일부 state 업데이트를 트랜지션으로 표시합니다.

import { useTransition } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  // ...
}

 

📍 매개변수

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

 

📍 반환값

useTransition은 정확히 두 개의 항목이 있는 배열을 반환합니다:

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

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

 

📍 startTransition function

useTransition이 반환하는 startTransition 함수를 사용하면 state 업데이트를 트랜지션으로 표시할 수 있습니다.

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

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

 

* 매개변수

scope: 하나 이상의 set 함수를 호출하여 일부 state를 업데이트하는 함수 React는 매개변수 없이 scope를 즉시 호출하고 scope 함수 호출 중에 동기적으로 예약된 모든 state 업데이트를 트랜지션으로 표시합니다. 이는 논블로킹이거, 원치 않는 로딩을 표시하지 않을 것입니다.

 

* 반환값

startTransition은 아무것도 반환하지 않습니다.

 

* 주의사항

- useTransition은 훅이므로 컴포넌트나 커스텀 훅 내부에서만 호출할 수 있습니다. 다른 곳에서 트랜지션을 시작해야 하는 경우, 대신 독립형 startTransition을 호출하세요.

- 해당 state의 set 함수에 접근할 수 있는 경우에만 업데이트를 트랜지션으로 감쌀 수 있습니다.

- 트랜지션으로 표시괸 state 업데이트는 다른 state 업데이트에 의해 중단됩니다.

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

- 진행중인 트랜지션이 여러 개 있는 경우, React는 현재 트랜지션을 함께 일괄 처리합니다. 이는 향후 릴리스에서 제거될 가능성이 높은 제한 사항입니다.

 

📌 사용 방법

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

컴포넌트의 최상위 레벨에서 useTransition을 호출하여 state 업데이트를 논블로킹 트랜지션으로 표시하세요.

import { useState, useTransition } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  // ...
}

1. 보류 중인 트랜지션이 있는지 여부를 알려주는 isPending 플래그를 선택합니다.

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

 

그런 다음, 다음과 같이 state 업데이트를 트랜지션으로 표시할 수 있습니다:

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

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

트랜지션을 사용하면 느린 디바이스에서도 사용자 인터페이스 업데이트의 반응성 유지를 할 수 있습니다.

 

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

 

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

useTransition 호출에서도 부모 컴포넌트의 state를 업데이트할 수 있습니다. 

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

부모 컴포넌트가 onClick 이벤트 핸들러 내에서 state를 업데이트하기 때문에 해당 state 업데이트는 트랜지션으로 표시됩니다. 그렇기 때문에 앞의 예시처럼 'Posts'를 클릭한 다음 바로 'Contact'를 클릭할 수 있습니다. 선택한 탭을 업데이트하는 것은 트랜지션으로 표시되므로 사용자 상호작용을 차단하지 않습니다.

 

3️⃣ 트랜지션 중에 '보류 중' state 표시하기

useTransition이 반환하는 isPendent boolean 값을 사용하여 트랜지션이 진행 중임을 사용자에게 표시할 수 있습니다. 예를 들어, 탭 버튼은 특별한 'pending' state를 가질 수 있습니다:

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

이제 탭 버튼 자체가 바로 업데이트되므로 'Posts'를 클릭하는 반응이 더 빨라진 것을 확인할 수 있습니다.

 

4️⃣ Suspense가 도입된 라우터 구축하기

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

function Router() {
  const [page, setPage] = useState('/');
  const [isPending, startTransition] = useTransition();

  function navigate(url) {
    startTransition(() => {
      setPage(url);
    });
  }
  // ...

두 가지 이유로 이 방법을 권장합니다:

• 트랜지션은 중단 가능하므로, 사용자는 다시 렌더링이 완료될 때까지 기다리지 않고 바로 클릭할 수 있습니다.
• 트랜지션은 원치 않는 로딩 표시를 방지하여, 사용자가 네이게이션 시 갑작스럽게 이동하는 것을 방지할 수 있습니다.