복잡한 단계별 UI 플로우를 안전하게 구현하는 React 상태 관리 라이브러리

npm install @use-funnel/browser

import { useFunnel } from '@use-funnel/browser';

const funnel = useFunnel<{
  Step1: { value1?: string };
  Step2: { value1: string; value2?: string };
  Step3: { value1: string; value2: string };
}>({
  id: 'my-funnel',
  initial: { step: 'Step1', context: {} },
});

<funnel.Render
  Step1={({ history }) => (
    <button onClick={() => history.push('Step2', { value1: 'test' })}>
      다음
    </button>
  )}
  Step2={({ history, context }) => (
    <div>{context.value1}</div>
  )}
  Step3={({ context }) => (
    <div>완료: {context.value1}, {context.value2}</div>
  )}
/>

import { useFunnel } from '@use-funnel/next';
// react-router: @use-funnel/react-router
// react-navigation: @use-funnel/react-navigation