참고 이 예제에서는 느리게 렌더링되는 콘텐츠가 포함된 탭 간 전환 시 간단한 탭 인터페이스가 어떻게 나쁜 사용자 경험을 초래할 수 있는지 볼 수 있습니다: ts (slow)`를 클릭한 후 UI에 피드백이 없습니다. 느리게 렌더링되는 콘텐츠가 전체 스레드를 차단하기 때문입니다. 방법이 없으므로 사용자는 콘텐츠가 로드될 때까지 기다려야 합니다. 다른 것과 상호작용하거나 다른 탭으로 이동하고 싶다면 어떻게 해야 할까요? 느리게 렌더링되는 탭으로의 후속 탐색도 여전히 느립니다.
부모 컴포넌트가 action 내에서 상태를 업데이트하기 때문에, 그 상태 업데이트는 전환으로 표시됩니다. 이는 "Posts"를 클릭한 후 즉시 "Contact"를 클릭할 수 있으며 사용자 상호작용을 차단하지 않는다는 것을 의미합니다. 🔗 출처.useTransition이 반환하는 isPending 불리언 값을 사용하여 전환이 진행 중임을 사용자에게 알릴 수 있습니다. 예를 들어, 탭 버튼은 특별한 "대기 중" 시각적 상태를 가질 수 있습니다. 🔗 출처."Posts"를 클릭하는 것이 이제 더 반응성이 좋아 보입니다. 탭 버튼 자체가 즉시 업데이트되기 때문입니다. 🔗 출처.
Posts 탭을 클릭했을 때, 앱은 여전히 반응성이 있으며 다른 곳으로 이동할 수 있습니다.isPending을 사용하는 것이 정말로 훌륭한 경험을 제공한다고 생각하지 않습니다. 방금 클릭한 탭이 대기 중임을 나타내지만, 이전 탭은 여전히 활성 상태로 간주되며 이전 탭 콘텐츠를 여전히 볼 수 있습니다. 이는 저에게 훌륭한 사용자 경험처럼 느껴지지 않습니다.Posts 탭으로 다시 탐색하는 것은 여전히 느립니다. 매번. 브라우저 유휴 시간 동안 백그라운드에서 렌더링되거나, 캐시되거나, 렌더링된 상태로 유지되었을 수 있습니다 (아래에서 다룰 <Activity>를 생각해보세요).isPending = true)를 표시하기 위한 긴급 렌더링isPending = false 및 새로운 상태 값으로의 동시 렌더링<Delay> 컴포넌트를 사용할 수 있습니다. 주로 첫 번째 렌더링을 건너뛰는 것입니다:<Delay>를 사용하면 탭을 먼저 업데이트한 다음 콘텐츠를 렌더링할 수 있도록 양보하여, 제 생각에는 훨씬 더 나은 사용자 경험을 달성했습니다.Posts 탭을 클릭하면 앱이 멈추고, 그것도 좋은 사용자 경험이 아닙니다. 보세요, 이것은 우리의 옵션을 평가하고 이제 더 나은 제어로 useTransition을 선택할 수 있는 경우입니다.<Delay>와 useTransition을 결합하여 두 가지 장점을 모두 얻을 수 있는 방법을 살펴보겠습니다. 이 예제에서는 <Delay>가 전환을 시작하여 탭을 먼저 업데이트한 다음 콘텐츠를 렌더링할 수 있도록 합니다.<Delay>가 전환을 시작하기 때문에, 이번에는 올바른 컨텍스트에서 isPending을 자유롭게 사용하여 콘텐츠 내에서 로딩 상태를 렌더링할 수 있습니다!참고 우선순위와 우리가 달성하려는 목표에 대한 상기: 한 업데이트: 탭**—훌륭한 사용자 경험을 위해 즉시 업데이트해야 합니다. 우선순위: 게시물 컨테이너**—사용자를 혼동시키지 않기 위해 이전 콘텐츠를 제거하고 새 콘텐츠를 위한 공간을 만들어야 합니다. 우선순위: 게시물 콘텐츠**—이것이 우리가 진정으로 전환이 필요한 실제 백그라운드 렌더링 활동입니다.
<Activity><Activity>를 통해 Posts의 콘텐츠를 미리 로드하거나, 단순히 렌더링할 수 있지만, 탭을 마운트된 상태로 유지하지만 숨겨진 상태로 유지할 수 있습니다. 렌더링하는 데 비용이 많이 들기 때문입니다.<Activity>는 자체 블로그 게시물이 될 수 있으므로, 지금은 React Docs의 🔗 출처를 참조하고 나중에 후속 조치를 취하겠습니다.아직 댓글이 없습니다.
첫 번째 댓글을 작성해보세요!