React useTransition 훑어보기

React 18부터 도입된 useTransition은 UI 상태 업데이트 중 긴 작업이 발생할 때 사용자 경험을 향상시키기 위해 비동기적으로 상태 전환을 관리하는 훅입니다. 렌더링이 느려지거나 UI가 멈추는 것을 막고, 작업 중임을 표시할 수 있는 상태 표시를 도와줍니다.

useTransition 기본 개념

• useTransition은 긴 작업이나 업데이트를 "전환(transition)"으로 표시하여 우선순위가 낮은 작업임을 React에게 알려줍니다.
• 이를 통해 중요한 UI(예: 버튼 클릭 효과)는 즉시 반영되고, 긴 작업은 비동기적으로 처리되어 부드러운 UI를 유지합니다.
• useTransition은 [isPending, startTransition] 형식의 배열을 반환합니다.
  • isPending: 전환 작업이 진행 중인지 나타내는 불리언 값
  • startTransition: 상태 업데이트를 전환 작업으로 감싸는 함수

예제: 목록 필터링에 useTransition 적용하기

import React, { useState, useTransition } from 'react';

const list = new Array(20000).fill(0).map((_, i) => i);

function List() {
const [filter, setFilter] = useState("");
const [isPending, startTransition] = useTransition();

const filteredList = list.filter(item => item.toString().includes(filter));

function onChange(e) {
const value = e.target.value;
// 긴 업데이트를 startTransition으로 감싸 비동기 처리
startTransition(() => {
setFilter(value);
});
}

return (
<div>
<input type="text" value={filter} onChange={onChange} placeholder="필터 입력" />
{isPending && <p>로딩 중...</p>}
<ul>
{filteredList.map(item => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
}

export default List;

• 이 예제에서 startTransition을 통해 필터 상태 업데이트를 우선순위 낮은 전환 작업으로 처리합니다.
• isPending이 true일 때 로딩 메시지를 보여 사용자에게 작업 진행 중임을 알립니다.

useTransition과 일반 상태 업데이트 비교

구분	일반 상태 업데이트 (useState)	useTransition 적용 시
처리 우선순위	즉시 반영	낮음 (비동기 처리)
UI 반응성	느린 작업 시 UI 멈춤 가능	UI 부드럽게 유지
사용자 피드백	별도 표시 필요	isPending으로 즉시 표시 가능

활용 팁

• UI가 무거워 업데이트가 느려질 때 사용하세요.
• 데이터를 필터링하거나 정렬할 때 긴 작업에 적합합니다.
• startTransition 안에 네트워크 요청이나 복잡한 연산을 감싸면 좋습니다.

결론

useTransition은 React에서 UI를 부드럽게 유지하면서 사용자가 작업 진행 상황을 알 수 있도록 돕는 유용한 훅입니다. 희생하는 UI 반응성을 줄이고 데이터 처리량이 많을 때 특히 효과적입니다.

---