react - useTransition을 활용해보자!

📌시작하며

리액트가 업데이트하면 하나씩 새로운 훅이 등장하곤 한다. 공식 홈페이지 좌측에 훅 리스트를 보다보면 익숙하지 않는 것도 있고, 매일 만나게 되는 훅도 있다.

이번에 살펴볼 훅은 useTransition()이다.

🌸useTransition

먼저 useTransition이 어떤 상황을 타피하기 위해 등장했는지부터 알아보자. 기본적으로 JS는 싱글스레드이기 때문에 작업 내용을 하나씩 처리하게 된다.

그러다 보니 문제는 JS 기반으로 만들어지는 리액트 컴포넌트에서 A탭에서 B탭으로 넘어갈 때, B탭의 양이 너무 많으면 시간이 소요되고, 그 때까지 사용자가 아무런 인터랙션을 할 수 없게 된다. 🤔

이 훅이 흥미로웠던 건 최근에 이런 상황을 계속해서 마주쳤기 때문이다. 이번 프로젝트에서는 탭 컴포넌트가 자주 사용되고 있는데, 조금 무거운 내용을 담고있는 탭의 경우 사용자가 탭을 클릭하자 잠시 웹이 멈춰버리는 느낌을 받아 UX에서 아쉬움을 느꼈기 때문이었다.

그리고 이런 상황을 해결하기 위해 useTransition이 사용된다고 보면 된다.

🍊 사용 방식

const [isPending, startTransition] = useTransition()

1. useTransition은 매개변수가 필요없다. useTransition()은 [isPending, startTransition]을 반환한다. 이 때 isPending은 현재 transition 처리 중 여부를 나타낸다.

📄 공식 예제

먼저 공식 문서에서 설명하는 예제를 살펴보자.

import { useState, useTransition } from "react"
import { updateQuantity } from "./api"

function CheckoutForm() {
  const [isPending, startTransition] = useTransition()
  const [quantity, setQuantity] = useState(1)

  function onSubmit(newQuantity) {
    startTransition(async function () {
      const savedQuantity = await updateQuantity(newQuantity)
      startTransition(() => {
        setQuantity(savedQuantity)
      })
    })
  }
  // ...
}

1. onSubmit을 실행할 경우, startTransition으로 감싼 함수 내부의 상태 업데이트가 낮은 우선순위로 처리된다.
2. async/await 로 서버에서 업데이트된 수량(savedQuantity)을 받아온 뒤 다시 startTransition으로 감싸 setQuantity를 호출한다.

🔍 startTransition vs useTransition

참고로 이름이 비슷한 startTransition이 존재한다. 완전히 똑같은 역할을 수행하진 않고, 약간의 차이점이 있으니 한 번 알아보자.

구분	역할	어디서 사용	반환값	로딩표시 가능 여부
startTransition(fn)	fn 안의 state 업데이트를 낮은 우선순위로 표시	컴포넌트 안/밖 모두 가능	없음	직접 관리해야 함
useTransition()	transition 시작 함수 + 진행 여부	컴포넌트 함수 내부	[isPending, startTransition]	isPending 로 가능

즉, “상태 분기를 늦춰 UI 끊김 줄이기”라는 아이디어는 같지만 useTransition은 진행 여부 표시까지 같이 제공한다는 점이 다르다.

🗂️참고 사이트

• https://react.dev/reference/react/useDeferredValue