[React]UseFunnel(설문조사 패턴 한페이지에서 관리하기)

오늘은 새로 적용시켜본 useFunnel에 대해서 적어보려고 한다.

 

토스 유투브를 통해 알게된 이 hook은 단계별로 화면이 이동될 때 사용하기 좋은 hook이다.

이 화면들을 토스에서는 '설문조사 패턴'이라고 한다.

이번 프로젝트에서도 이렇게 단계별로 넘어가는 페이지를 만들게 되었다.

modal이 연속되어 넘어가는 페이지로, 처음에는 단계에 맞는 모달창을 띄워주는 방식으로 코드를 구성했다.

하지만 그렇게 된다면 모달위에 모달이 새로 쌓이는 구조로, 모달 창을 종료하고 싶을때 지금까지 켜진 모달을 일일이 종료해줘야 하는 불편함이 있었다.

 

 

이 문제를 해결할 수 있는 것이 퍼널 방식이다.
단계가 여러개여도 한 페이지 안에서 모든 단계별 페이지를 관리 할 수 있어 유지보수에도 편하고 관리에도 용이해보인다.

 

먼저 useFunnel hook은 아래와 같이 적었다.

export function useFunnel() {
  const [step, setStep] = useState('a');

  const Step = (props) => {
    return <>{props?.props?.children}</>;
  };

  const Funnel = ({ children }) => {
    // name이 현재 step 상태와 동일할 경우 렌더링

    const targetStep = children.find((childStep) => childStep?.props?.name === step);
    return Step(targetStep);
  };

  return [Funnel, step, setStep];
}

이도 토스에 적혀있는 코드를 참고했는데, 왜인지 아래 토스와 같은 코드를 입력하면 object.assign부분에서 계속해서 오류가 발생했다.

 

object.assign 메소드는 두개의 배열을 합치는 역할을 하는데 이 부분에서 오류가 발생하는 이유가

Step함수를 찾지 못함에 있는 것 같았고 name으로 찾아낸 현재 상태 배열인 targetStep 배열을 funnel을 return 해주는 Step 함수에 보내주면 되지 않을까? 라는 생각이 들어 위와 같이 코드를 구성해보았더니 문제가 해결되었다.

useFunnel을 이용한 페이지에는 아래와 같이 해당하는 step 컴포넌트로 넘어가도록 적어뒀다. 

<Funnel.Step name="a">
	<AModal
    	onNext={() => {
        	setStep('b');
        }}
        onFailed={() => {
           	setStep('c');
        }}
    />
</Funnel.Step>

전체적인 흐름은 아래와 같다.

 

setStep으로 단계를 넘겨주면 각 단계에 맞는 Funnel 컴포넌트로 넘어가고, 그렇게 한 페이지에서 관리가 가능한 것이다.

두 배열을 합치는 메소드를 제외하고 문제를 해결하기는 했지만 계속해서 찝찝한 부분이 남아있던 이번 과제였다.
공부가 아직 부족함을 특히 더 느꼈다

 

---

참고

https://slash.page/libraries/react/use-funnel/readme.i18n/

useFunnel | Slash libraries

https://fe-developers.kakaoent.com/2022/220731-composition-component/

합성 컴포넌트로 재사용성 극대화하기 | 카카오엔터테인먼트 FE 기술블로그