Reacts New ViewTransition Component Is A Little Flakey

React의 새로운 View Transition 컴포넌트는 브라우저의 기능을 활용하여 매끄러운 화면 전환을 제공하지만, 아직 실험적인 단계라 일관성이 부족할 수 있음. 🧪

React 19 이상(실험적 브랜치) 또는 Next.js 15.2 이상에서 사용 가능하며, unstable_viewTransition을 임포트하여 사용. ➡️

useTransition 훅을 사용하여 전환 시작을 제어하고, flushSync를 통해 DOM 업데이트를 보장하여 안정적인 애니메이션을 구현. 🔄

View Transition 이름을 지정하여 특정 요소의 애니메이션을 제어하고, 동일한 이름을 가진 요소 간의 전환도 가능. 🏷️

Next.js 15.2의 RSC(React Server Components) 모드에서는 내장된 React 버전을 통해 실험적 기능 사용 가능. 🚀

TanStack Router의 기본 View Transition 지원을 활용하면 더욱 안정적이고 쉽게 화면 전환 애니메이션을 구현 가능. 🚗

CSS 애니메이션과 결합하여 더욱 다양하고 세련된 화면 전환 효과를 만들 수 있음. ✨