퍼널 안에 퍼널 만들기

퍼널을 개발하다 보면 하나의 상태를 만들기 위해 여러 단계를 거쳐야 할 때가 있어요. 또는 일정 부분의 퍼널 단계를 다른 곳에서 재활용해야 할 때도 있어요. 이럴 때 퍼널을 서브 퍼널로 나누면 효율적이에요. 흐름도로 보면 다음과 같아요.

@use-funnel은 서브 퍼널을 지원해요. 간단하게 step 하위의 컴포넌트에서 useFunnel()을 사용할 때 다른 id를 지정하면 돼요.

import { useFunnel } from "@use-funnel/react-router-dom";

import { BFunnel } from "./BFunnel";

export function Example() {
  const funnel = useFunnel<{
    A: { a?: string; b?: string; };
    B: { a: string; b?: string; };
    C: { a: string; b: string; };
  }>({
    id: "main-funnel",
    initial: {
      step: "A",
      context: {}
    }
  });
  return (
    <funnel.Render
      A={({ history }) => (
        <div>
          <h1>A Step</h1>
          <button onClick={() => history.push('B', { a: 'a' })}>Next</button>
        </div>
      )}
      B={({ context, history }) => (
        <div>
          <h1>B Step</h1>
          <BFunnel a={context.a} onNext={b => history.push('C', { b })} />
        </div>
      )}
      C={({ context }) => (
        <div>
          <h1>C Step</h1>
          <p>a: {context.a}</p>
          <p>b: {context.b}</p>
        </div>
      )}
    />
  )
}

Open Sandbox

단계별 context 정의하기 라우터 직접 만들기