📚 Reference

• 공식 문서 1

📜 Chapter

useTransition

startTransition

• startTransition
• 사용자 경험(UX)을 부드럽게 만들기 위해 도입된 기능으로, 상태 업데이트의 우선순위를 나누는 도구라고 이해하면 된다.
• 쉽게 비유하자면, "지금 당장 처리해야 할 급한 일"과 "조금 천천히 해도 되는 일"을 구분하는 것이다.
• startTransition을 사용하면 UI의 일부를 백그라운드에서 렌더링할 수 있다.

필요한 이유

• 일반적으로 React의 상태 업데이트는 모두 '긴급(Urgent)'으로 처리된다. 예를 들어, 사용자가 검색창에 타이핑을 할 때마다 화면의 검색 결과 리스트가 수천 개씩 새로고침된다고 가정해보자.
  1. 입력창 업데이트: 사용자가 글자를 입력하는 즉시 화면에 반영되어야 함 (느려지면 답답함을 느낌).
  2. 리스트 필터링: 결과가 나오는 데 0.5초 정도 걸려도 사용자는 어느 정도 이해함.
• 만약 이 두 작업이 동시에 '긴급'하게 처리되면, 리스트를 계산하느라 타이핑 화면 자체가 멈추는(Lag) 현상이 발생한다.

역할

• startTransition으로 감싼 상태 업데이트는 비긴급(Non-urgent)으로 분류된다.
• 덕분에 브라우저는 타이핑 같은 더 중요한 인터랙션을 먼저 처리하고, 무거운 렌더링 작업은 백그라운드에서 여유 있을 때 진행한다.