Generator, 추상화하기 좋네!

redux-saga 말고는 쓸 일이 없었던.. Generator 이야기

온보딩 모달, 뉴피쳐 모달, 긴급 공지 모달 등 여러 가지 모달들이 순서와 조건에 맞게 첫 화면에 보여야 했다.

기존의 코드는 각각의 이벤트를 직접 호출 하는 방식이었다. 예를 들면, 뉴피쳐 모달을 닫는 이벤트에 온보딩 모달을 여는 액션을 넣는 식으로 구현되어 있었다. 사실상 하나의 로직인데 여기저기 코드가 산발적으로 흩어져 있어 유지보수가 힘들었다.

해결책으로, Popup을 관리하는 모듈을 하나 만들고, 다음과 같이 제너레이터 함수 내에 실행되어야 하는 모달 액션과 조건을 넣어 차례로 실행되도록 구현했다.

    *proceedAnimationpagePopup() {
        yield this.showEmergencyNotificationIfExsist();
        if (!this.isNewFeatureModalDone) {
            yield this.showNewFeatureModal();
        }
        if (!this.isOnboardingDone) {
            yield this.showOnboalding();
        }
        if (!this.isVMOnboardingDone) {
            yield this.showVmOnboarding();
        }
    }

이런 식으로 구현하면, 모달 이벤트를 발생시키는 컴포넌트에서는 사실상 어떤 액션이 발생해야 하는지 신경 쓸 필요 없이 다음 로직을 실행시키면 된다.

    popupManager.next();

비동기 처리까지 되기 때문에, 차례로 실행되는 로직을 추상화시킬 때 상당히 좋은 거 같다!