토스ㅣSLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기
www.youtube.com
useFunnel: 토스가 선보인 React의 다단계 효율적 상태관리
useFunnel은 토스에서 개발한 React 라이브러리 입니다. Funnel이란 깔때기 라는 뜻으로 마케팅 용어 인데요. 사용자가 특정 목표를 달성하기까지의 단계를 표현해서, 여러 단계로 이동할때마다 사용자가 점점 이탈하는 모습을 시각화 한 것입니다.
useFunnel훅은 이런 단계별 페이지의 상태를 단일 페이지에서 손쉽게 관리할 수있게 도와주는 훅입니다. 따라서 개발자는 복잡한 여러 페이지 상태 관리를 손쉽게 관리할 수 있는데요.
주요 기능은 다음과 같습니다
단계 정의: useFunnel을 사용하면 여러 단계를 정의할 수 있습니다. 각 단계는 사용자가 거쳐야 하는 특정 작업이나 화면을 나타냅니다.
상태관리: 흩어져 있는 상태를 단일 페이지에 관리하여 응집도를 높여 전체적인 UI 흐름 파악이 손쉽게 가능합니다.
디버깅: Funnel Debugger를 통해 복잡한 페이지별 상태를 다이어그램으로 시각화해서 보여주고, 각 스텝 클릭시 원하는 스텝으로 이동 및 파악이 가능합니다.
useFunnel훅은 회원가입, 온보딩 등의 다단계 사용자 인터렉션이 필요한 경우 유용할것 같습니다. 이 훅을 통해 개발 생산성을 향상시키고, 복잡한 상태 관리 로직을 단순화 할 수 있을것 같습니다.
국내 기업이 이런 유용한 오픈소스 라이브러리를 지원해주는것이 한국 개발 커뮤니티의 성장과 기술적 기여를 보여주는 고무적인 사례인데요. 복잡한 페이지 상태를 손쉽게 관리하는 로직이 있다면 도입을 적극 검토해봐도 괜찮을것 같습니다.
https://www.youtube.com/watch?v=NwLWX2RNVcw
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 6월 25일 오전 12:36
댓글 0
함께 읽은 게시물
ConcurrentWebSocketSessionDecorator 소개
S
... 더 보기
얼마전에 신입 개발자 채용시 과제를 10분 내에 빠르게 만들어서 보낸 사람을 채용했다며, 빠르게 결과를 냈기 때문에 채용했다는 글이 SNS에 많이 돌았다. 그러면서 이렇게 말한다.
"알고리즘 많이 푸는 개발자보다, AI로 빠르게 결과 내는 사람을 선호. 알고리즘, 코딩 책 안 봐도 AI 도구만 적극 활용하면 취업 기회 잡을 수 있다."
AI를 사용하여 코딩하며 느낀 점들
최근에 회사 업무로 데모를 작업해야 할 일이 있어서 (프론트 + 백엔드/AI + GCP 인프라) cline + gemini 2.5 pro 조합으로 한동안 vibe coding 스타일로 업무를 진행해 보았습니다.
... 더 보기
