동시성 렌더러는 React에게 긴급한 작업과 덜 긴급한 작업을 구분할 수 있는 지능을 부여했다. 하지만 React가 스스로 모든 상태 업데이트의 중요도를 판단할 수는 없었다. 때로는 개발자가 직접 React에게 “이 업데이트는 그다지 긴급하지 않으니, 다른 중요한 작업을 방해하지 말고 부드럽게 처리해줘”라고 알려줄 필요가 있었다.
이 역할을 위해 탄생한 API가 바로 startTransition이었다.
과거 React 18에서 처음 소개되었지만, 서버 컴포넌트와 Suspense가 주류가 된 React 19 패러다임에서 startTransition은 더욱 핵심적인 역할로 격상되었다.
문제 상황은 이랬다. 사용자가 검색창에 무언가를 입력하면, 두 가지 상태 업데이트가 동시에 발생해야 한다.
- 입력창 자체의 값 업데이트: 사용자가 누른 키가 즉시 입력창에 보여야 한다. 이것은 매우 긴급하다.
- 검색 결과 목록 업데이트: 입력된 값으로 API를 호출하고, 그 결과를 받아 목록을 다시 그린다. 이것은 약간의 지연이 허용된다.
만약 이 두 업데이트를 똑같은 우선순위로 처리하면, 사용자가 키를 누를 때마다 검색 결과를 다시 그리는 무거운 렌더링이 발생하여 타이핑 자체가 버벅이는 끔찍한 경험을 하게 된다.
“바로 이럴 때 startTransition이 필요합니다.”
세바스찬 마크바게는 startTransition의 사용법을 보여주는 예제 코드를 작성했다.
const [inputValue, setInputValue] = useState('');
const [searchQuery, setSearchQuery] = = useState('');
const handleChange = (e) => {
// 1. 긴급한 업데이트: 입력창 값 변경
setInputValue(e.target.value);
// 2. 덜 긴급한 업데이트를 Transition으로 감싼다
startTransition(() => {
setSearchQuery(e.target.value);
});
};
startTransition으로 감싸인 setSearchQuery는 이제 ‘전환(Transition)’ 업데이트로 표시된다.
이 코드가 실행되면, React의 동시성 엔진은 다음과 같이 동작한다.
setInputValue를 먼저 처리한다. 이것은 긴급한 업데이트이므로 즉시 렌더링되어 사용자는 입력창에 자신의 타이핑이 반영되는 것을 본다.startTransition안의setSearchQuery를 처리하기 시작한다. 이로 인해 검색 결과 목록을 다시 그리는 무거운 렌더링이 시작된다.- 바로 그 순간, 사용자가 다음 키를 입력한다.
- 동시성 엔진은 이 새로운 키 입력이 ‘긴급’하다고 판단하고, 진행 중이던 검색 결과 렌더링을 ‘중단’한다.
- 새로운 키 입력을 먼저 처리해 입력창을 업데이트한 뒤, 이전의 낡은 검색 결과 렌더링은 아예 ‘폐기’하고 새로운
searchQuery값으로 렌더링을 다시 시작한다.
이 모든 과정 덕분에, 사용자는 타이핑을 하는 내내 단 한 순간의 버벅임도 느끼지 못한다. 검색 결과는 항상 최신 입력값을 기준으로, 현재 UI를 방해하지 않는 선에서 부드럽게 업데이트된다.
startTransition은 개발자와 React 사이의 새로운 소통 방식이었다. 개발자는 “이 상태 변경은 화면 전환과 관련이 있어”라고 의도를 전달하고, React는 그 의도를 알아듣고 최적의 사용자 경험을 만들어내는 것이다.
이것은 로딩 스피너를 보여주는 것과는 또 다른 차원의 경험 개선이었다. Suspense가 ‘아무것도 없는 상태’에서 ‘무언가 있는 상태’로의 전환을 다룬다면, startTransition은 ‘기존 콘텐츠가 있는 상태’에서 ‘새로운 콘텐츠가 있는 상태’로의 전환을 다루었다.
특히 Suspense와 함께 사용될 때, startTransition은 더욱 강력해졌다. 전환 업데이트 중에 데이터 로딩으로 인해 Suspense가 발동되더라도, React는 성급하게 로딩 fallback을 보여주는 대신, 이전 UI를 그대로 보여주면서 백그라운드에서 다음 화면을 준비했다. 모든 준비가 끝나면 한 번에 화면을 교체하여, 불필요한 로딩 상태 노출을 최소화했다.
‘전환’이라는 이름처럼, startTransition은 상태와 상태 사이의 모든 경계를 허물고, 물 흐르듯 자연스러운 사용자 경험을 만들어내는 React 19의 핵심적인 도구로 자리매김하고 있었다.
