logologo
시작
가이드
개발
플러그인
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
시작
가이드
개발
플러그인
API
logologo

소개

FlowEngine이란?
FlowEngine과 플러그인의 관계
빠른 시작
학습 로드맵

가이드

FlowModel 등록
FlowModel 생성
FlowModel 렌더링
FlowModel 이벤트 플로우 & 구성
FlowModel 영속성
FlowModel 생명주기
FlowModel 컨텍스트 시스템
반응형 메커니즘: Observable
FlowModel vs React.Component

Definitions

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous Page반응형 메커니즘: Observable
Next PageModelDefinition
TIP

이 문서는 AI로 번역되었습니다. 부정확한 내용이 있을 경우 영어 버전을 참조하세요

#FlowModel 대 React.Component

#기본 역할 비교

특징/기능React.ComponentFlowModel
렌더링 기능예, render() 메서드가 UI를 생성합니다.예, render() 메서드가 UI를 생성합니다.
상태 관리내장된 state 및 setStateprops를 사용하지만, 상태 관리는 모델 트리 구조에 더 의존합니다.
생명 주기예, componentDidMount와 같은 훅이 있습니다.예, onInit, onMount, onUnmount와 같은 훅이 있습니다.
용도UI 컴포넌트 구축데이터 기반의 흐름 지향적이고 구조화된 "모델 트리" 구축
데이터 구조컴포넌트 트리모델 트리 (부모-자식 모델, 다중 인스턴스 Fork 지원)
자식 컴포넌트JSX를 사용하여 컴포넌트 중첩setSubModel/addSubModel을 사용하여 자식 모델 명시적으로 설정
동적 동작이벤트 바인딩, 상태 업데이트를 통한 UI 구동Flow 등록/디스패치, 자동 흐름 처리
영속성내장된 메커니즘 없음영속성 지원 (예: model.save())
Fork 지원 (다중 렌더링)아니요 (수동 재사용 필요)예 (createFork를 통한 다중 인스턴스화)
엔진 제어없음예, FlowEngine에 의해 관리, 등록 및 로드됩니다.

#생명 주기 비교

생명 주기 훅React.ComponentFlowModel
초기화constructor, componentDidMountonInit, onMount
언마운트componentWillUnmountonUnmount
입력 응답componentDidUpdateonBeforeAutoFlows, onAfterAutoFlows
오류 처리componentDidCatchonAutoFlowsError

#구조 비교

React:

class MyComponent extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

FlowModel:

class HelloModel extends FlowModel {
  render() {
    return <div>Hello</div>;
  }
}

#컴포넌트 트리 대 모델 트리

  • React 컴포넌트 트리: 런타임에 JSX 중첩으로 형성되는 UI 렌더링 트리입니다.
  • FlowModel 모델 트리: FlowEngine이 관리하는 논리적 구조 트리로, 영속화가 가능하며 자식 모델을 동적으로 등록하고 제어할 수 있습니다. 페이지 블록, 작업 흐름, 데이터 모델 등을 구축하는 데 적합합니다.

#FlowModel 전용 기능

기능설명
registerFlow흐름 등록
applyFlow / dispatchEvent흐름 실행/트리거
setSubModel / addSubModel자식 모델의 생성 및 바인딩을 명시적으로 제어
createFork하나의 모델 로직을 여러 번 재사용하여 렌더링하는 것을 지원합니다 (예: 테이블의 각 행).
openFlowSettings흐름 단계 설정
save / saveStepParams()모델을 영속화하고 백엔드와 연동할 수 있습니다.

#요약

항목React.ComponentFlowModel
적합한 시나리오UI 계층 컴포넌트 구성데이터 기반의 흐름 및 블록 관리
핵심 아이디어선언적 UI모델 기반의 구조화된 흐름
관리 방식React가 생명 주기를 제어FlowModel이 모델의 생명 주기 및 구조를 제어
장점풍부한 생태계와 도구 체인강력한 구조화, 영속 가능한 흐름, 제어 가능한 자식 모델

FlowModel은 React와 상호 보완적으로 사용할 수 있습니다. FlowModel 내에서 React를 사용하여 렌더링하고, FlowEngine이 해당 생명 주기와 구조를 관리하는 방식입니다.