스킬 자체의 표현으로
React의 View Transition API로 UI 상태 간 애니메이션을 구현하는 가이드입니다: ViewTransition 컴포넌트로 무엇을 전환할지 선언하고, startTransition, useDeferredValue 또는 Suspense로 언제 전환을 트리거할지 결정하며, CSS 클래스로 어떻게 전환할지 제어합니다. 고정된 우선순위 순서로 다섯 가지 패턴을 다루며, 공유 요소 모프, 목록 아이덴티티, 상태 변경과 라우트 변경, 그리고 addTransitionType과 Next.js App Router 연동을 통한 타입 기반 방향성 내비게이션을 포함합니다.
ViewTransition 경계가 어디에 위치해야 하는지, default="none"이 언제 필요한지, 어떤 브라우저가 이를 지원하는지(Chromium 125+, Firefox 144+, Safari 18.2+) 그리고 그 외 브라우저에서의 우아한 성능 저하 방식을 설명하며, 구현 순서, CSS 레시피, 패턴, 문제 해결을 위한 참고 파일을 안내합니다.
산출물
- 멀티 페이지 앱을 위해 타입 기반 진입 및 종료 맵을 담은 재사용 가능한 방향성 래퍼 컴포넌트.
- 마운트 해제되는 뷰와 마운트되는 뷰에 동일한 이름을 재사용하여 만들어지는 공유 요소 모프(shared element morph)로, 예를 들어 썸네일이 히어로 이미지로 변하는 경우입니다.
- 두 스냅샷을 모두 담는 이미지 페어를 포함하여, 뷰 트랜지션 가상 요소(pseudo-element)에 연결된 CSS 규칙입니다.
- 지원하지 않는 브라우저에서는 내비게이션이 깨지는 대신 애니메이션을 건너뛰도록 우아하게 저하되는 구현 방식입니다.
작동 방식
- 01애니메이션이 무엇을 표현하는지 파악하기
경계(boundary)가 표현하는 공간적 관계나 연속성을 명확히 설명할 수 있을 때만 경계를 추가하십시오. 무엇을 전달하는지 말할 수 없다면 추가하지 마십시오.
- 02상태를 경계(boundary)로 감싸기
React는 내부적으로 고유한 view-transition-name을 할당하고 document.startViewTransition을 호출하므로, 직접 startViewTransition을 호출할 필요가 없습니다.
- 03트랜지션으로 트리거하기
진입, 종료, 업데이트, 공유 애니메이션은 startTransition, useDeferredValue 또는 Suspense에서만 발생합니다. 일반적인 setState로는 아무것도 애니메이션되지 않습니다.
- 04CSS로 스냅샷 스타일링하기
나가는 스냅샷과 들어오는 스냅샷은 사용자 지정 클래스 이름을 가진 뷰 트랜지션 가상 요소를 통해 타겟팅되며, 레시피 파일이 바로 사용할 수 있는 애니메이션을 제공합니다.
- 05트랜지션 타입으로 태그하기
addTransitionType은 컨텍스트 타입을 스택으로 쌓아 트리 내 서로 다른 경계(boundary)가 각기 다르게 반응하도록 하며, 타입별 객체는 진입, 종료, 공유 시 이러한 타입을 CSS 클래스에 매핑합니다.