Funnel 패턴 공부하기

퍼널 패턴이란?

퍼널 패턴은 단계별로 사용자 데이터를 입력받고 처리하는 과정을 설계하는 방법이다. 퍼널이라는 단어에서 유추할 수 있듯이, 여러 단계를 거치며 데이터를 점진적으로 모으고 필터링한다. 특히, 사용자 경험이 중요한 멀티스텝 폼이나 단계별 입력이 필요한 서비스(예: 회원가입, 예약 시스템)에서 유용하다.

퍼널 패턴의 주요 특징

1. 단계적 데이터 관리:
   • 여러 단계를 나누어 데이터를 입력받고 처리한다.
   • 각 단계에서 입력된 데이터는 별도로 저장되고, 최종적으로 전체 데이터를 하나로 합친다.
2. 사용자 경험 최적화:
   • 한 번에 모든 데이터를 입력받기보다 단계를 나눠 부담을 줄인다.
   • 단계별로 사용자의 진행 상황을 보여줄 수 있다.
3. 유지보수성 향상:
   • 각 단계를 컴포넌트로 분리하여 독립적으로 관리 가능하다.
   • 비즈니스 로직과 UI를 명확히 분리할 수 있다.

React에서 퍼널 패턴 구현하기

React 환경에서 퍼널 패턴을 구현할 때, 상태 관리와 폼 데이터 처리가 중요하다. React Hook Form은 폼 데이터를 효율적으로 처리하고, 성능 최적화를 제공하는 훌륭한 도구이다.

 

import React, { ReactElement, useState } from "react";

interface StepProps {
  name: string;
  children: ReactElement;
}

interface FunnelProps {
  children: ReactElement[];
}

export const useFunnel = (initialStep: string) => {
  const [currentStep, setCurrentStep] = useState<string>(initialStep);

  const Step = ({ children }: StepProps) => {
    return <>{children}</>;
  };

  // 모든 Step을 미리 children으로 품고 있다가 진행에 필요한 순서에 맞는 Step을 보여준다.
  const Funnel = ({ children }: FunnelProps) => {
    // Funnel 안에 Step 컴포넌트 말고 다른 컴포넌트를 포함하고 있어야 할 수도 있기 때문에 Step 컴포넌트만 걸러주는 작업이 필요
    const steps = React.Children.toArray(children)
      .map((child) => {
        if (React.isValidElement<StepProps>(child) && child.type === Step) {
          return child;
        }
        return null;
      })
      .filter(Boolean) as ReactElement<StepProps>[];
    const activeStep = steps.find((child) => child.props.name === currentStep);
    return activeStep || null;
  };

  const next = (nextStep: string) => {
    setCurrentStep(nextStep);
  };

  const prev = (prevStep: string) => {
    setCurrentStep(prevStep);
  };

  return { Funnel, Step, next, prev, currentStep };
};