[React] Funnel 컴포넌트

이번 과제를 진행할 때 Funnel 컴포넌트를 사용해서 만들어야 했다. 

근데 중요한 사실... 넥스트스텝 선생님들,,,, 저는 Funnel 컴포넌트가 몬지 몰라요 ...ㅠㅠㅠ

 

지금까지의 문제

설문 조사를 위해서 페이지별로 사용자에게 정보를 전달받아 마지막에 API로 전송하는 기능을 

만든다고 생각해보자 

설문지 1페이지, 2페이지, 3페이지, 전송 플로우 이미지

이런 종류의 페이지는 

설문 페이지의 상태를 관리하기 위해서 Context API & Redux 등 전역 상태 관리 &  라우팅 이동 플로우

사진으로 보는 것처럼 각 페이지에서 상태를 관리하고 싶지 않다면 Context API, Redux 같은 전역 상태 관리를 하고 

각각의 페이지가 구현된 파일을 돌아다니면서 관리해야 한다. 

 

결국 한 가지 목적을 위해서 상태가 흩어져 있다는 것이다. 

기능이 추가되거나 오류가 발생했을 때 전체 페이지를 넘나들면서 오류를 수정해야 한다. 

 

Funnel 컴포넌트 

사용자가 최종 목표까지 가는동안 조금씩 이탈하기 때문에 깔때기와 같은 모양이라서 

Funnel ( 사전적 의미 : 깔때기 ) 이라는 이름이 붙여졌다. 

 

여러 페이지를 통해 상태를 수집하고 결과 페이지를 보여주는 형태를 의미한다. 

[Funnel 패턴을 적용한 플로우] 전체 상태를 두고 페이지 이동이 아닌 state으로 페이지 관리

 

UI 는 [설문지 1페이지] 등 각 페이지에서 담당하고 페이지 이동은 상위 컴포넌트에서 State로 관리하는 방식이다. 

 

또한 전역 상태관리가 아니라 상위 컴포넌트에서 입력을 관리하므로 수정사항이 발생했을 때 전체 페이지를

보는 것이 아닌 공통의 부모 컴포넌트까지의 범위를 가지고 있으므로 상태 관리도 쉽다. 

 

가장 대표적으로 Toss의 useFunnel 커스텀 훅이 있다.