Modal을 Promise<TResult> 기반 Typed Async 연산으로 전환하여 런타임 타입 에러 원천 차단

Why modal.open() should return Promise<TResult>, not Promise<any>

Oleksii Kyrychenko2026년 6월 12일12분intermediate

AI 요약

Context

전통적인 React Modal 구현 방식인 Boolean flag 기반 상태 관리로 인한 Props Drilling 및 복잡한 Callback Chain 발생. 특히 Promise 기반 라이브러리 사용 시 Modal 결과값의 타입 추론 불가로 인한 런타임 버그 위험 상존.

Technical Solution

Modal을 단순 UI 컴포넌트가 아닌 Typed Async Contract로 재정의하여 입력(Input)과 결과(Result)의 타입을 강제하는 설계 채택
ModalProvider와 Zustand를 통한 상태 격리로 글로벌 상태 오염을 방지하고 Provider 범위 내에서만 상태가 유지되는 Scoped State 구조 구현
modal.open() 메서드에 Generic 타입을 적용하여 Modal 정의 단계에서 결정된 TResult가 호출부로 자동 추론되는 메커니즘 구축
UI 레이어와 비즈니스 로직을 분리하여 React 컴포넌트 외부(서비스, 액션 맵 등)에서도 Modal 호출이 가능한 아키텍처 설계
status 필드를 통한 Discriminated Union 패턴 적용으로 결과값에 따른 조건부 로직의 타입 안전성 확보

실천 포인트

- Modal 결과값이 비즈니스 로직에 영향을 주는 경우 Boolean 상태 대신 Async/Await 패턴 검토 - Modal 입력과 출력 타입을 인터페이스로 명시하여 호출부와 구현부 간의 타입 계약(Contract) 수립 - 전역 상태 라이브러리 도입 시 Provider를 통한 Scope 제한으로 테스트 간 상태 간섭 방지책 마련 - UI 프레임워크에 종속되지 않는 Modal 관리 로직을 분리하여 유지보수성 향상

태그

#Zustand #Type Safety #React Architecture #Async/Await #TypeScript

원문 읽기