유저로부터 정보 입력받는 페이지를 만들 때 구분

Question

토스의 한페이지마다 한개의 정보를 입력받는 페이지를 만드려고 하는데 각 페이지를 링크로 구분하나요?
아니면 눈속임으로 한 페이지안에서 render하는 페이지를 여러개 만들어놓고 차례차례 보여주나요?

답변해주셔서 감사합니다!

lepffm · Answer

정보를 공유, 유지해야하는 화면들의 경우(위자드, 신청 프로세스 등) 해당 영역을 작은 컴포넌트로 만들고 해당 영역만 바꿔치기 하는 방식을 선호합니다.
하지만 토스는 어떤 방식을 선택 했는지 모르겠네요.

정종윤 · Answer

토스의 SLASH 23 에 해당 내용과 관련있는 세션이 있어서 소개드립니다. 정보를 순차적으로 입력받는 경험을 토스에서는 퍼널(Funnel)이라는 용어로 정의했습니다.

https://www.youtube.com/watch?v=NwLWX2RNVcw

해당 세션에서는 각 입력 단계 별로 페이지를 만들면 데이터의 응집도가 떨어지고 흐름의 추적이 어려워지기 때문에 하나의 페이지 내에서 조건문을 통해 render 하는 것을 알 수 있습니다. 또한 토스에서는 이러한 퍼널 구현 경험을 좀 더 일반화하여 useFunnel 이라는 커스텀 훅을 제공하고 있으니 아래 라이브러리를 참고하시면 좋을 것 같습니다.

https://www.slash.page/ko/libraries/react/use-funnel/README.i18n