정답 해설

중간 단계: useQuery로 선언적 구현

function Dashboard() {
  const { data: users, isLoading: isLoadingUsers } = useQuery(
    dashboardQueries.users()
  );
  const { data: categories, isLoading: isLoadingCategories } = useQuery(
    dashboardQueries.categories()
  );

  // 여전히 로딩 체크는 필요
  if (isLoadingUsers || isLoadingCategories) {
    return <DashboardSkeleton />;
  }

  return (
    <div>
      <UserList users={users} />
      <CategoryList categories={categories} />
    </div>
  );
}
TypeScript
복사

After: useSuspenseQuery로 데이터가 무조건 있다는 전제 하에

// queries/index.ts - 쿼리 정의 중앙화
export const dashboardQueries = {
  users: () =>
    queryOptions({
      queryKey: ["dashboard", "users"] as const,
      queryFn: fetchUsers
    }),
  categories: () =>
    queryOptions({
      queryKey: ["dashboard", "categories"] as const,
      queryFn: fetchCategories
    }),
};

// components/Dashboard.tsx - Parse 철학 적용
function DashboardPage() {
  return (
    <ErrorBoundary fallback={<ErrorPage />}>
      <Suspense fallback={<DashboardSkeleton />}>
        <Dashboard />
      </Suspense>
    </ErrorBoundary>
  );
}

function Dashboard() {
  // 경계를 통과했으므로 데이터는 항상 있음
  const [{ data: users }, { data: categories }] = useSuspenseQueries({
    queries: [dashboardQueries.users(), dashboardQueries.categories()],
  });

  // 깔끔! 로딩/에러 체크 없음
  return (
    <div>
      <UserList users={users} />
      <CategoryList categories={categories} />
    </div>
  );
}
TypeScript
복사