useFlow 순환참조 해결하기

💡

Future API를 사용하면 useFlow() 순환참조 문제를 쉽게 해결할 수 있어요. Future API 사용을 권장해요.

stackflow() 함수가 반환하는 useFlow() 함수는 선언된 액티비티 타입을 활용해요. 따라서 useFlow()와 액티비티 컴포넌트는 서로 맞물리면서 순환 참조(Circular Dependency)를 일으켜요. useActions() 훅을 사용하고 타입을 따로 import 받으면 이러한 순환 참조를 제거할 수 있어요.

stackflow.ts

import { stackflow } from "@stackflow/react";
 
export const { Stack, activities } = stackflow({
  activities: {
    // ...
  },
  // ...
});
 
// 다음과 같이 액티비티의 타입을 노출해요.
export type TypeActivities = typeof activities;

stackflow.ts

import { useActions } from "@stackflow/react";
 
// 노출된 액티비티 타입만 가져와서 사용해요.
import type { TypeActivities } from "./stackflow";
 
export const useMyFlow = () => {
  return useActions<TypeActivities>();
};

⚡️

TypeActivities는 앞으로 제공될 유틸 컴포넌트/훅 들에 비슷하게 활용돼요.

히스토리와 동기화하기 프리로딩