콘텐츠

강의실 모달 지옥에서 탈출하기: React useFunnel hook 설계

스토리 · 인프런 테크 · 2025.10.27

인프런의 프론트엔드 개발자가 복잡하게 얽힌 모달 노출 로직을 어떻게 해결했는지에 대한 경험담을 공유해 드립니다. 기존에는 각 모달이 다음 모달을 직접 호출하는 강한 결합도와 복잡한 조건 분기 문제로 인해 유지보수가 매우 어려웠습니다. 특히 새로운 요구사항이 추가될 때마다 여러 컴포넌트를 수정해야 하는 비효율적인 구조를 가지고 있었습니다. 이를 해결하기 위해 '퍼널(Funnel) 패턴'을 도입하여 `useFunnel`이라는 커스텀 훅을 설계했습니다. 이제 모달의 실행 순서를 배열로 선언적으로 관리할 수 있게 되어, 코드의 가독성이 높아지고 새로운 요구사항에도 유연하게 대응할 수 있게 되었습니다.