React 19 멘탈 모델의 첫 번째 축이 ‘공간(위치)’이었다면, 두 번째 축은 바로 ‘시간(Time)’이었다. 렌더링 과정에서 발생하는 필연적인 ‘기다림’의 시간을 어떻게 제어하고, 사용자의 경험을 어떻게 구성할 것인가에 대한 문제였다.
로렌 탄은 화이트보드에 타임라인을 하나 그렸다. 왼쪽 끝은 ‘요청 시작’, 오른쪽 끝은 ‘화면 완성’이었다.
“과거의 렌더링 모델에서, 이 타임라인은 하나의 거대한 블록이었습니다.”
그녀는 타임라인 전체를 하나의 긴 직사각형으로 덮었다.
“모든 데이터가 준비되고, 모든 컴포넌트가 렌더링될 때까지 사용자는 그저 기다려야만 했습니다. 그 긴 시간 동안 보이는 것은 빈 화면이나 전체 화면을 덮는 로딩 스피너뿐이었죠. 시간은 통제 불가능한 대상이었습니다.”
하지만 React 19는 이 monolithic한 시간의 흐름을 잘게 쪼개고, 그 순서를 재배치할 수 있는 강력한 도구들을 도입했다. 바로 Suspense와 Transition이었다.
“이제 우리는 시간의 흐름을 직접 설계할 수 있습니다.”
로렌은 새로운 타임라인을 그렸다. 이번에는 여러 개의 작은 조각들로 나뉘어 있었다.
“Suspense는 타임라인 위에 ‘경계선’을 긋는 역할을 합니다. ‘여기까지는 먼저 보여주고, 이 다음 부분은 데이터가 준비될 때까지 기다리겠다’고 선언하는 것이죠.”
그녀는 Suspense를 사용해 페이지를 나누는 예시를 들었다.
- 즉시 렌더링: 헤더, 내비게이션 바 등 즉시 보여줄 수 있는 레이아웃 뼈대.
- 첫 번째 Suspense 경계: 사용자 프로필 정보. 데이터가 도착하면 이 부분이 채워진다.
- 두 번째 Suspense 경계: 친구 목록. 프로필보다 데이터 로딩이 더 오래 걸릴 수 있다.
이 경계들 덕분에, 사용자는 더 이상 모든 것이 완성될 때까지 기다릴 필요가 없었다. 뼈대가 먼저 보이고, 프로필이 나타나고, 마지막으로 친구 목록이 채워지는 순차적인 경험을 하게 된다. 시간은 더 이상 하나의 덩어리가 아니라, 의미 있는 단위로 구성된 흐름이 되었다.
“Transition은 이 시간의 흐름 속에서 ‘우선순위’를 정하는 역할을 합니다.”
그녀는 startTransition의 원리를 시간의 축 위에서 설명했다.
“사용자가 버튼을 클릭해 새로운 화면으로 이동한다고 가정합시다. 이 화면 전환은 시간이 걸리는 작업이죠. 이때 startTransition은 React에게 이렇게 말하는 것과 같습니다: ‘지금 당장 화면을 바꾸려고 서두르지 마. 현재 화면을 잠시 더 보여주면서, 백그라운드에서 다음 화면을 완벽하게 준비해줘. 모든 준비가 끝나면 그때 한 번에 부드럽게 바꿔줘.’”
Transition은 성급한 로딩 화면의 노출을 막고, 현재의 상호작용을 방해하지 않으면서 시간의 흐름을 매끄럽게 이어주는 역할을 했다. 그것은 사용자에게 가장 중요한 것, 즉 ‘현재의 안정적인 상태’를 보장해주는 약속이었다.
React 19의 시간 모델은 명확한 철학을 담고 있었다.
Suspense: ‘모든 것을 기다리지 말고, 준비된 것부터 먼저 보여주자.’Transition: ‘불완전한 다음 상태를 성급하게 보여주느니, 안정적인 현재 상태를 유지하자.’
이 두 가지 도구를 통해, 개발자는 이제 코드의 실행 순서뿐만 아니라, 사용자가 경험하는 시간의 순서와 흐름까지도 직접 설계할 수 있게 되었다. 더 이상 통제 불가능한 기다림의 시간이 아니었다. 그것은 사용자를 위해 세심하게 연출된, 한 편의 잘 짜인 각본이 될 수 있었다.
