아키텍처

Context-Action은 MVVM에서 영감을 받은 패턴을 통해 명확한 관심사 분리를 구현합니다.

핵심 아키텍처

프레임워크는 관심사를 세 개의 명확한 레이어로 분리합니다:

[컴포넌트] → dispatch → [액션 파이프라인] → handlers → [스토어] → subscribe → [컴포넌트]

레이어

View 레이어: UI를 렌더링하고 액션을 디스패치하는 React 컴포넌트
ViewModel 레이어: 우선순위 기반 핸들러 실행을 가진 액션 파이프라인
Model 레이어: 반응형 상태 관리를 가진 스토어 시스템

컨텍스트 분리

Context-Action은 코드를 도메인별 컨텍스트로 구성합니다:

도메인 기반 컨텍스트

비즈니스 컨텍스트: 비즈니스 로직, 데이터 처리, 도메인 규칙
UI 컨텍스트: 화면 상태, 사용자 상호작용, 컴포넌트 동작
검증 컨텍스트: 데이터 검증, 폼 처리, 에러 핸들링
디자인 컨텍스트: 테마 관리, 스타일링, 레이아웃, 비주얼 상태
아키텍처 컨텍스트: 시스템 설정, 인프라스트럭처, 기술적 결정

컨텍스트 장점

도메인 격리: 각 컨텍스트는 완전한 독립성을 유지
명확한 경계: 구현 결과는 뚜렷하고 잘 정의된 도메인 경계를 유지
타입 안전성: 도메인별 훅과 함께 완전한 TypeScript 지원
확장성: 기존 도메인에 영향을 주지 않고 새로운 도메인을 쉽게 추가

핸들러 관리

Context-Action은 정교한 핸들러 및 트리거 관리를 제공합니다:

우선순위 기반 실행

순차 처리: 적절한 비동기 처리와 함께 우선순위 순서로 핸들러 실행
도메인 격리: 각 컨텍스트는 자체 핸들러 레지스트리를 유지
교차 컨텍스트 조정: 도메인 컨텍스트 간 제어된 통신
결과 수집: 복잡한 워크플로를 위한 여러 핸들러의 결과 집계

트리거 시스템

상태 변경 트리거: 스토어 값 변경에 기반한 자동 트리거
교차 컨텍스트 트리거: 도메인 경계가 다른 컨텍스트의 액션을 트리거
조건부 트리거: 비즈니스 규칙과 조건에 기반한 스마트 트리거
트리거 정리: 자동 정리가 메모리 누수와 오래된 참조를 방지

패키지 구조

Context-Action은 TypeScript 모노레포로 구성됩니다:

@context-action/core - 핵심 액션 파이프라인 관리 (React 종속성 없음)
@context-action/react - Context API와 훅을 이용한 React 통합

주요 장점

문서-아티팩트 관리: 문서와 구현 간의 직접적인 관계
완벽한 관심사 분리: 서로 다른 도메인 컨텍스트 간의 명확한 경계
고급 핸들러 관리: 정교한 트리거 시스템을 가진 우선순위 기반 핸들러 실행
타입 안전성: 프레임워크 전반에 걸친 완전한 TypeScript 지원
성능: 영향받는 컴포넌트만 다시 렌더링
팀 협업: 서로 다른 팀이 서로 다른 도메인에서 작업 가능