logologo
시작
가이드
개발
플러그인
API
홈
English
简体中文
日本語
한국어
Español
Português
Deutsch
Français
Русский
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
RunJS 플러그인 확장 포인트

Definitions

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous Page반응형 메커니즘: Observable
Next PageRunJS 플러그인 확장 포인트
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이 해당 생명 주기와 구조를 관리하는 방식입니다.