toss/slash의 use-funnel 훅 내부 구현 탐구하고 직접 구현하기(2)

💫 이전글에서 내부 구현을 간단히 다루었습니다.

https://xionwcfm.tistory.com/422

 

따라서 이번에는 위 구현방식을 참고해서 제가 필요한 기능만 뽑은

 

커스텀 useFunnel을 제작해보겠습니다.

 

사실 그냥 토스의 useFunnel 훅을 갖다쓰고 싶은 마음이 더 컸지만

 

사용에 꽤 많은 애로사항이 있어서 그냥 필요한 기능만 들어간 커스텀훅을 만들기로 했습니다.

 

 

토스의 구현 방식에서 얻을 수 있었던 인사이트를 나열해보면 다음과 같습니다.

 

1. nextjs의 shallow routing을 통해 뒤로가기를 구현하면서도 상태를 유지할 수 있다.

 

(pages router에서는 쉘로우라우팅이 잘 지원되는데

 

앱라우터는 이슈가 많더라구요 앱라우터 쓰시는 분들은 참고하셔야겠습니다.)

2. 뒤로가기의 히스토리 관리는 1을 통해 브라우저 히스토리 스택으로 관리하면 편하다.

 

3. 합성컴포넌트 패턴을 통해 퍼널의 세부 구현을 아주 잘 감춰줄 수 있다.

 

4. 제네릭을 통해 합성컴포넌트들의 타입을 적절히 추론하게 하면 개발자 경험이 좋다

 

 

더 많은 깨달음을 얻은 분들도 계시겠지만.. 제게 인상깊었던 것은 저 네개였습니다.

 

이제 저 네개를 참고로하여 필요한 부분을 커스터마이징한 useFunnel을 만들어봅시다.

 

토스의 원본 구현과 비교하여 제게 필요 없었던 기능은 다음과 같습니다.

 

 

1. 퍼널에 대한 정보를 특정 스토리지에 구애받지않고 스토리지에 저장할 수 있는 기능

 

2. 중첩 퍼널의 고려

 

3. 히스토리스택 비우기 기능

 

 

반대로 필요한 기능은 다음과 같았는데요

 

1. 언제든 재사용할 수 있는 퍼널 기능과 컴포넌트

 

2. 다음 스텝으로 넘어갈 수 있는 함수

 

3. 초기 시작값 설정 기능

 

4. 쿼리스트링을 기반으로한 뒤로가기 기능

 

5. 쉘로우라우팅을 통한 이전 상태 유지 기능

 

 

제게 필요한 간단한 기능만 구현하고자해보니 생각보다 간단히 구현할 수 있었습니다.

---

🐯 나만의 useFunnel 만들기

export type NonEmptyArray<T> = readonly [T, ...T[]];
export interface FunnelProps<Steps extends NonEmptyArray<string>> {
  steps: Steps;
  step: Steps[number];
  children:
    | Array<React.ReactElement<StepProps<Steps>>>
    | React.ReactElement<StepProps<Steps>>;
}
export interface StepProps<Steps extends NonEmptyArray<string>> {
  name: Steps[number];
  onEnter?: () => void;
  children: React.ReactNode;
}
type RouteFunnelProps<Steps extends NonEmptyArray<string>> = Omit<
  FunnelProps<Steps>,
  'steps' | 'step'
>;

먼저 필요한 타입들을 선언해주겠습니다.

 

위 타입들에 대한 설명이 궁금하신 분들은 이전 글을 참고해주세요

 

https://xionwcfm.tistory.com/422

 

 

이제 Funnel 컴포넌트를 구현해봅시다.

export const Funnel = <Steps extends NonEmptyArray<string>>({
  step,
  steps,
  children,
}: FunnelProps<Steps>) => {
  const validChildren = Children.toArray(children)
    .filter(isValidElement)
    .filter((item) =>
      steps.includes((item.props as Partial<StepProps<Steps>>).name ?? ''),
    ) as Array<React.ReactElement<StepProps<Steps>>>;
  const targetStep = validChildren.find((child) => child.props.name === step);
  return <>{targetStep}</>;
};

Funnel 컴포넌트 역시 토스의 원본 구현과 크게 다르지 않습니다.

 

Funnel 컴포넌트가 하는 일은 그저

 

타겟이 될 step 프랍과 문자열 배열 steps를 받고

 

children중에 props.name이 step인 children을 렌더링할뿐인 순수한 컴포넌트입니다.

 

 

다음은 Step 컴포넌트를 보겠습니다.

const Step = <Steps extends NonEmptyArray<string>>({
  children,
}: StepProps<Steps>) => {
  return <>{children}</>;
};

Step 컴포넌트는 더욱 심플한데요

 

name 과 children을 받으면서 children을 리턴하는 일만 수행합니다.

 

현재 스텝에 따라 스텝 컴포넌트를 렌더링할지 말지는

 

Funnel 컴포넌트가 담당하기때문에 Step 컴포넌트는

 

자기자신을 식별할 수 있는 name과 렌더링할 칠드런만 알고있으면 됩니다.

 

const useFunnel = <Steps extends NonEmptyArray<string>>(
  array: Steps,
  option?: {
    initialStep: Steps[number];
  },
) => {
  const [steps, setSteps] = React.useState<Steps>(array);
  const router = useRouter();
  const step = router.query.step as unknown as string;
  const nextStep = (nextQuery: Steps[number]) => {
    return () =>
      router.push(`${router.pathname}?step=${nextQuery}`, undefined, {
        shallow: true,
      });
  };
  useEffect(() => {
    if (option?.hasOwnProperty('initialStep')) {
      router.replace(`${router.pathname}?step=${option.initialStep}`);
    } else {
      router.replace(`${router.pathname}?step=${steps[0]}`);
    }
  }, []);

  const FunnelComponent = useMemo(() => {
    // eslint-disable-next-line react/display-name
    return Object.assign(
      (props: RouteFunnelProps<Steps>) => {
        return <Funnel<Steps> step={step} steps={steps} {...props} />;
      },
      {
        Step: (props: StepProps<Steps>) => {
          return <Step {...props} />;
        },
      },
    );
  }, [step, steps]);
  return [FunnelComponent, nextStep] as const;
};

다음은 Funnel훅의 구현입니다.

 

사실 이 훅을 구현하면서 가장 아쉬웠던 부분은

 

next.js의 next/router 경로의 useRouter 훅에 로직의 중요한 부분들이 강하게 의존하고있기때문에

 

next.js의 page router를 사용할 때에만 성립이 되는 훅이라는 점입니다.

 

이 훅의 구현을 위해 필요한것은 쿼리스트링에 포함된 ?step= 의 내부밸류인데요

 

쿼리스트링의 밸류와 일치하는 컴포넌트를 렌더링하는 것을 통해 퍼널을 구현하고 있기 때문입니다.

 

step = legend인 경우 name이 legend인 컴포넌트를 렌더링한다.

 

 

아무튼 내부 구현은 토스의 useFunnel 훅에 비하면 매우 간소화된 형태로 구현했습니다.

 

  const [steps, setSteps] = React.useState<Steps>(array);
  const router = useRouter();
  const step = router.query.step as unknown as string;
  const nextStep = (nextQuery: Steps[number]) => {
    return () =>
      router.push(`${router.pathname}?step=${nextQuery}`, undefined, {
        shallow: true,
      });
  };

steps 상태를 만들어주고

 

useRouter를 통해 쿼리의 step을 뽑아옵니다.

 

그리고 매번 router.push를 직접작성하는것은 실수의 위험이 있기때문에

 

쉘로우라우팅과 현재 경로에서 step 로직만 추가하는 함수를 만들어 반환해주었습니다.

 

const useFunnel = <Steps extends NonEmptyArray<string>>(
  array: Steps,
  option?: {
    initialStep: Steps[number];
  },
useEffect(() => {
    if (option?.hasOwnProperty('initialStep')) {
      router.replace(`${router.pathname}?step=${option.initialStep}`);
    } else {
      router.replace(`${router.pathname}?step=${steps[0]}`);
    }
  }, []);

다음은 초기값을 정해주는 일을 수행했는데요

 

만약 option 객체의 initialStep을 지정해주었다면 지정된 초기값으로 시작하고

 

따로 지정해주지 않았다면 배열의 첫번째 요소로 시작하도록 지정했습니다.

  const FunnelComponent = useMemo(() => {
    // eslint-disable-next-line react/display-name
    return Object.assign(
      (props: RouteFunnelProps<Steps>) => {
        return <Funnel<Steps> step={step} steps={steps} {...props} />;
      },
      {
        Step: (props: StepProps<Steps>) => {
          return <Step {...props} />;
        },
      },
    );
  }, [step, steps]);
  return [FunnelComponent, nextStep] as const;

 

다음으로는 Funnel과 Step을 담고있으면서

 

제네릭으로 추론이 쉽게 될 수 있는 코드를 작성해야했습니다.

 

토스의 FunnelComponent 구현에서 인사이트를 얻어

 

위와 같이 제네릭을 받아 넘겨주는 형태로 Funnel과 Step을 한번 래핑해주었고

 

step이 바뀔때마다 다시 동작하도록 useMemo의 의존성배열을 추가해줬습니다.

 

이제 커스텀으로 만든 useFunnel을 사용해보죠!

 

---

✨ 이개외데냐

const FunnelExample = ({}: funnelProps) => {
  const route = ['iam', 'zzang', 'legend'] as const;
  const [Funnel, nextStep] = useFunnel(route);

  return (
    <div>
      <Funnel>
        <Funnel.Step name="iam">
          <div className="" onClick={nextStep('legend')}>
            wow
          </div>
        </Funnel.Step>
        <Funnel.Step name="zzang">
          <div className="" onClick={nextStep('iam')}>
            hi
          </div>
        </Funnel.Step>
        <Funnel.Step name="legend">
          <div className="" onClick={nextStep('zzang')}>
            zzang im nida
          </div>
        </Funnel.Step>
      </Funnel>
    </div>
  );
};

제법 그럴듯하게 사용할 수 있어졌습니다.

 

prop에 다음 스텝에 대한 정보를 넘겨줄 때에 항상 메인컨테이너에서 확인할 수 있는 구조가 되었고

 

내부 컴포넌트는 어디로 이동하는지에 대해 알 필요없이 주입받은 경로로 이동만 하는

 

느슨한 구조를 만들 수 있었습니다.

 

 

이정도만 되어도 제가 필요한만큼의 요구사항은 충족하기 때문에

 

우선 이렇게 쓰면서 필요하다면 기능을 추가해나갈 것 같습니다.

 

 

nextRouter에 대한 의존성을 좀 더 느슨하게 만들고 싶지만..

 

일단은 만족스럽네요!

 

---

🐝 마치며

토스에서 만들어둔 useFunnel 훅의 모든 기능을 구현하지는 못했지만

 

어느정도 열화판으로나마 만들어보면서 타입스크립트를 많이 배운 것 같습니다.

 

사실 이펙티브 타입스크립트도 다 읽어보고 타입스크립트에 대한 아티클들도 꽤 찾아봐서

 

어느정도 타입스크립트를 할 줄 안다라고 생각했는데

 

정말 처음보는 기법들을 많이 배웠네요..

 

시간날때마다 다른 훅들도 구현을 좀 뜯어봐야겠습니다.

 

이런 코드를 쓰는 사람들과 같이 일하면 정말 행복할 것 같아요...