State 구조
앞서 Meta, State 페이지에서 Meta 데이터의 경우 Builder 및 Renderer 페이지에서 추상화되어 생성 및 사용되기 때문에 사용자는 그 구조에 대해 알 필요가 없다고 이야기했습니다. 하지만 State의 경우 사용자가 필요에 의해 직접 업데이트해야 할 때가 있으므로 그 구조를 알 필요가 있습니다.1 지금부터는 State의 구조에 대해 설명하도록 하겠습니다.
State는 하나의 객체이며, 레이아웃-세부 컴포넌트 구조로 중첩된 객체 형식의 자료구조입니다. State의 구조를 대략적으로 나타내면 다음과 같습니다.
{
[레이아웃 타입]: {
[레이아웃 key]: {
[세부 컴포넌트 key]: [세부 컴포넌트 value]
} // 이 값은 레이아웃 타입에 따라 배열이 될 수도 있습니다.
}
}
예시로 폼 및 테이블 정보를 가진 State 데이터의 일부를 보여드리겠습니다.
{
"forms": {
"forms1": {
"name": "세희"
}
},
"tables": {
"tables1": [
{
"name": "영희",
"age": 14
},
{
"name": "철수",
"age": 12
},
{
"name": "영수",
"age": 10
},
{
"name": "맹구",
"age": 14
}
]
}
}
State는 이렇듯 중첩 객체들의 묶음입니다. 이제부터는 각 Key와 Value가 어떻게 정해지는지 알아보겠습니다.
최상단 Key : 레이아웃 타입
앞선 문서에서 말했듯 레이아웃 컴포넌트에는 헤더, 폼, 테이블, 다이얼로그, 코드 에디터, 노드 에디터가 있습니다. 레이아웃 타입 값이란 이 값들을 의미하는 내부적으로 정의된 문자열을 말합니다.
각 타입별로 정의된 문자열(이하 타입 문자열)은 다음과 같습니다.
| 레이아웃 타입 | State 내 타입 문자열 |
|---|---|
| 폼 | forms |
| 테이블 | tables |
| 다이얼로그 | dialogs |
| 코드 에디터 | codeeditors |
| 노드 에디터 | nodeeditors |
| 섹션 | sections |
헤더의 경우 State로 정의할 만한 데이터가 없으므로 State 타입이 존재하지 않습니다. 화면을 구성하는 Meta와 값을 나타내는 State가 다르다는 것을 항상 기억하세요.
섹션(sections)은 Render as React 모드에서 사용 가능한 Section을 배치했을 때 생성되는 State 타입입니다.
이렇듯 State의 맨 상단 key는 타입 문자열로 이루어져 있습니다. 따라서 아무런 변경도 가하지 않은 State의 초기값은 다음과 같습니다.
{
"forms": {},
"tables": {},
"dialogs": {},
"codeeditors": {},
"nodeeditors": {},
"sections": {},
}
중간 Key : 레이아웃, 컴포넌트 Key
Builder 페이지의 모든 레이아웃 컴포넌트들과 세부 컴포넌트들은 key라는 속성을 필수로 갖습니다. key는 컴포넌트 등록 시 자동으로 생성되지만 사용자가 임의의 값을 지정할 수도 있습니다.
key 값은 현재 컴포넌트가 위치한 계층 안에서 고유한 값이어야 합니다. 다만 서로 다른 계층에 있는 컴포넌트의 경우 동일한 key를 가져도 됩니다.2
위에서 등장했던 폼 및 테이블 예시 State에서, 폼 레이아웃의 key는 forms1이고 테이블 레이아웃의 key는 tables1입니다. 그리고 각 객체에 값으로 중첩되어 있는 하위 key들("name", "age")은 각 레이아웃에 속해 있는 세부 컴포넌트의 key들입니다.
Value : 레이아웃 컴포넌트의 종류에 따른 값
State.["레이아웃 타입"].["레이아웃 key"] 아래에 오는 value는 레이아웃 컴포넌트의 종류에 따라 다른 객체 타입을 가집니다. 예시에서도 볼 수 있듯, table의 경우 value는 객체 배열입니다. 반면 form의 경우 {"컴포넌트 key" : "컴포넌트 value"} 형식을 가집니다.
또한 레이아웃 컴포넌트의 종류에 따라 State가 나타내는 의미가 달라집니다. 이를 정리하면 다음과 같습니다.
| 레이아웃 타입 | State 구조 예시 | State 값 타입 | 설명 |
|---|---|---|---|
| 폼 | state.forms.formKey | {[componentKey] : [componentValue]} | 폼에 속한 각 컴포넌트의 value를 나타냅니다. |
| 테이블 | state.tables.tableKey | {[컬럼 key] : [컬럼 value]} 형태의 객체 배열 | 테이블에 디스플레이되는 리스트 값을 의미합니다. |
| 다이얼로그 | state.dialogs.dialogKey | {isOpen : boolean } | 다이얼로그 오픈 여부를 나타내는 isOpen 어트리뷰트를 가집니다. |
| 코드 에디터 | state.codeeditors.codeEditorKey | string | 코드 에디터의 value를 의미합니다. |
| 노드 에디터 | state.nodeeditors.nodeEditorKey | { id : string; [nodeKey] : [nodeInfo]; begin: string; end: string; } | 노드 flow의 노드 정보와 연결 정보 등이 포함됩니다. |
| 섹션 | state.sections.sectionKey | { [속성 key] : [속성 value] } | Panel의 펼침 여부, Wizard의 현재 단계 등 섹션 컴포넌트의 상호작용 상태를 나타 냅니다. |