Suspense 와 useTransition

• Suspense 로 fallback 을 표시하여, 전체 탭 컨테이너를 숨기면 사용자 경험이 어색해짐
• TabButton에 useTransition을 추가하면 탭 버튼에 보류중인 상태를 표시 가능

import { useTransition } from 'react';

export default function TabButton({ children, isActive, onClick }) {
  const [isPending, startTransition] = useTransition();
  if (isActive) {
    return <b>{children}</b>
  }
  if (isPending) {
    return <b className="pending">{children}</b>;
  }
  return (
    <button onClick={() => {
      startTransition(() => {
        onClick();
      });
    }}>
      {children}
    </button>
  );
}

`

Transition은 이미 표시된 콘텐츠(예시: 탭 컨테이너)를 숨기지 않을 만큼만 “대기”합니다. 만약 Posts 탭에 중첩된 <Suspense> 경계가 있는 경우 Transition 은 이를 “대기”하지 않습니다.

• Transition에서의 대기란?
  • 대기한다는 것은 새 콘텐츠가 준비될 때 까지 기존 UI가 표시되는 것
• 탭 컨테이너 예시
  • 탭을 전환할 때, Transition은 새 탭의 콘텐츠가 준비될 때 까지 현재 탭의 콘텐츠를 표시한다.
• 중첩된 <Suspense> 경계
  • Transition은 최상위 레벨의 콘텐츠 전환만을 대기한다.
  • 새탭 내부에 있는 중첩된 Suspense 경계는 이 "대기" 대상에 포함되지 않는다.
• 즉, Transition은 주요 UI 구조(탭컨테이너)의 전환을 부드럽게 만들지만, 내부 콘텐츠의 세부적인 로딩은 Suspense를 통해 별도로 관리된다.