<aside> 👊 Funnel 방식을 사용하자

</aside>

내가 생각한 구조 ⇒ 컴포넌트를 분할 후, state를 통하여 각 상태에 맞는 컴포넌트를 호출하고 차례대로 넘긴다. state와 여러 값들은 전역 상태로 관리한다.

이는 정석적인 설계이며 작동에도 문제가 없다.

그러나 유지보수적인 문제점이 존재

• 페이지 흐름이 흩어져 있음

• 목적을 위한 상태가 흩어짐

  • 상태의 사용과 수집에서의 어려움
  • 변수의 흐름을 이해하기 어려움

  

이를 개선해보자

1. 응집도 높이기; 하나의 퍼널을 만든 후, 데이터는 지역 변수로 설정 스텝 역시 useSteate를 통하여 나누어 주고, 컴포넌트들을 모두 퍼널에서 사용한다. 이후 스텝 상태에 따라 조건부 렌더링… 세부사항은 하위에서 관리하며 흐름은 상위에서 관리 가능!! APi 호출도 상위에서 관리하도록 하자
2. 추상화 라이브러리로 묶자! Step 에 따라 조건부 렌더링 부분을 컴포넌트로 추상화… useFunnel을 만들어서 step 상태를 관리하도록 하기

구조

Pages에 onboading페이지 선언 큰 흐름은 버튼 이벤트, 컴포넌트의 children, useFunnel을 통한 상태 관리. 상태에 따라 컴포넌트의 children을 렌더링하는 방식

상태에 따른 렌더링은 정석적인 방법과 같지만 컴포넌트를 나누고 커스텀 훅을 통해 상태를 관리, 그리고 모든 것은 하나의 컴포넌트에서 지역적으로 변경된다는 점이다.

구현

• 뭔가 결과 코드만 보고 우당탕탕 하기에는 나에게 난이도가 있다 느꼈다. 그래서 그냥 정석 코드를 바꿔나가는 느낌으로…….

<aside> 👊 useFunnel로 Funnel 컴포넌트의 상태를 관리한다. 내부에서는 step의 상태를 useState를 통하여 관리하여 Funnel에 반영하도록 한다.

</aside>

1차