tech.inflab.com · 2025. 10. 27.
강의실 모달 지옥에서 탈출하기: React useFunnel hook 설계
AI 엔지니어링 브리핑
강의실에서 여러 모달과 후속 동작이 복잡하게 이어지던 문제를, 실행 순서와 조건을 한곳에서 관리하는 React useFunnel hook으로 정리한 경험을 소개합니다.
문제 & 배경
- 문제 & 배경: 모달이 다음 모달을 직접 호출하고 언어·진도율·수강평 가능 여부 같은 조건이 여러 컴포넌트에 흩어져, 작은 정책 변경에도 여러 파일을 수정해야 했습니다.
기술 & 해결책
- 기술 & 해결책: 각 모달이나 함수 동작을 조건과 실행 내용이 담긴 단계로 정의하고,
startFunnel이 순서대로 실행하며 모달이 닫힐 때nextStep으로 다음 단계로 넘어가도록 구현해 흐름과 조건을 중앙에서 관리했습니다.
교훈 & 주의점
- 교훈 & 주의점: 모달 간 결합과 수정 범위가 줄고 실행 순서를 한눈에 파악할 수 있게 되었지만, 배열 기반 퍼널은 특정 단계로 이동하거나 오류가 난 위치를 추적하기 어려울 수 있어 필요에 따라 보완이 필요합니다.
함께 읽을 글
내용이 비슷해요내용이 비슷한 글을 먼저 보여드려요. 같은 문제나 해결책을 다룬다는 뜻은 아니에요.