React useFunnel Hook으로 강의실 모달 지옥 탈출!
by DD
7개월 전
조회수 2
React 기반 강의실 모달 로직의 복잡성을 해결하기 위해 useFunnel hook을 설계함
Funnel 패턴을 활용하여 모달 간 강한 결합을 제거하고, 조건 분기 로직을 중앙 집중화함
코드 가독성 및 유지보수성을 향상시켜 새로운 요구사항에 유연하게 대응 가능해짐
useFunnel Hook의 핵심 설계
useFunnel hook은 모달, 함수 호출을 Step으로 추상화하여 순차적으로 실행한다. 구체적으로, `startFunnel`로 퍼널을 시작하고, `nextStep`을 호출하여 다음 단계를 진행한다. 따라서 모달 간의 의존성을 제거하고, 코드 구조를 단순화한다.
기존 구조 vs Funnel 패턴
기존 방식은 각 모달이 다음 모달을 직접 호출하여 강한 결합을 야기했다. 반면 Funnel 패턴은 각 모달이 `nextStep()`만 호출하므로 결합도를 낮추고 유연성을 확보한다. 결과적으로 모달 순서 변경 및 조건 로직 관리가 용이해진다.
useFunnel Hook의 확장성
useFunnel hook은 `prepareCondition`을 통해 API 호출을 대기하거나, 중첩 퍼널을 지원하여 확장성을 높였다. 구체적으로, 중첩 퍼널은 특정 단계에서 다른 퍼널을 실행하며, 즉시 실행할 step과 제외할 step을 설정할 수 있다. 따라서 복잡한 요구사항에도 유연하게 대응 가능하다.
