

복잡한 데이터 처리 – 데이터 구조에 적합한 구성 요소 선택
복잡한 데이터를 시각화하고 상호 작용하는 데 도움이 될 수 있는 세 가지 핵심 구성 요소는 무엇입니까? TreeGrid, Tree Component, Hierarchical Grid에 대해 자세히 알아보세요.
복잡한 데이터 세트를 관리하는 것은 최신 애플리케이션에서 일반적인 과제입니다. 자체 참조 관계, 계층 구조 또는 다른 유형의 데이터를 처리하는 경우 올바른 구성 요소를 선택하면 성능, 사용자 환경 및 유지 관리 효율성에 큰 영향을 미칠 수 있습니다.
이 블로그 게시물에서는 App Builder를 사용하는 동안 복잡한 데이터를 시각화하고 상호 작용하는 데 도움이 될 수 있는 세 가지 주요 구성 요소의 차이점을 분석합니다.
- 트리그리드
- 트리 구성 요소
- 계층적 그리드(HGrid)
이러한 각 구성 요소는 서로 다른 데이터 구조에 최적화되어 있습니다. 이러한 기능을 이해하면 응용 프로그램의 요구 사항에 가장 적합한 기능을 결정할 수 있습니다.
데이터 구조 이해 & 올바른 구성 요소
데이터 구조는 일반적으로 세 가지 주요 유형으로 분류할 수 있습니다.
- Self-Referencing (Hierarchical) Data(자체 참조) 데이터– 자신을 참조하는 엔터티(예: 직원의 관리자 또는 감독자 비즈니스 키가 포함된 직원 테이블에서 들어오는 데이터)입니다. 관리자 또는 감독자도 직원입니다. 따라서 직원 레코드는 직원과 감독자 간의 자체 참조 관계와 함께 도착합니다.

- Homogeneous Parent-Child Data(동종 부모-자식 데이터) – 각 부모 레코드에 동일한 유형의 자식 레코드가 여러 개 있는 데이터입니다. 좋은 예는 전자 상거래 데이터베이스의 범주 계층입니다.
트리 구조를 사용하는 범주 계층Category hierarchy using a tree structure
Electronics (ID: 1) ├── Laptops (ID: 2) │ ├── Gaming Laptops (ID: 4) │ ├── Ultrabooks (ID: 5) ├── Smartphones (ID: 3)
Schema:
category_id | category_name | parent_category_id |
1 | 전자공학 | NULL |
2 | 노트북 | 1 |
3 | 스마트폰 | 1 |
4 | 게임용 노트북 | 2 |
5 | 울트라북 | 2 |
- "전자 제품"은 최상위 범주입니다.
- "노트북" 및 "스마트폰"은 "전자 제품"의 하위 범주입니다.
- "게임용 노트북" 및 "울트라북"은 "노트북"의 하위 범주입니다.
이는 부모와 자식이 모두 동일한 엔터티 형식(범주)에 속하기 때문에 동질적인 관계입니다.
그러나 모든 동질적인 부모-자식 관계가 자체 참조되는 것은 사실이지만 모든 자체 참조 구조가 계층적인 것은 아닙니다. 관계가 트리와 같은 계층 구조를 형성하는 경우 일반적으로 동질적인 부모-자식 관계입니다. 관계가 단순히 인스턴스를 연결하는 경우 자체 참조이지만 반드시 계층적이지는 않습니다.

이제 마지막 데이터 구조 유형을 살펴보겠습니다.
- 이기종 데이터– 계층의 각 수준에는 주문 및 주문 세부 정보가 있는 고객과 같은 서로 다른 구조가 있습니다.

데이터의 구조를 이해하면 자체 참조, 동종 또는 공통점이 없는지 여부에 관계없이 애플리케이션의 요구 사항에 가장 적합한 구성 요소에 대해 정보에 입각한 결정을 내릴 수 있습니다.
그렇게 말하고 다양한 구성 요소와 그들이 소비할 수 있는 데이터를 탐색하기 전에 아래에서 편의를 위해 각 데이터 구조 유형에 대한 간단한 비교 표를 찾을 수 있습니다.
비교표
양상 | Homogeneous Data (동일 구조) | 자체 참조 데이터(동일한 형식이 자체에 연결됨) | 이기종 데이터(수준마다 다른 구조) |
정의 | 두 엔터티가 동일한 구조를 갖는 부모-자식 관계입니다. | 엔터티는 자신의 다른 인스턴스에 대한 참조를 포함합니다. | 각 수준이 서로 다른 구조를 갖는 계층적 관계입니다. |
데이터 구조 | 트리 또는 그래프(예: 범주 트리, 조직 차트). | 연결된 목록, 트리, 그래프(예: 단일 연결된 목록, 계층적 조직). | 외래 키가 있는 관계형 데이터베이스(예: 고객 → 주문 → 주문 세부 정보). |
Hierarchy Type(계층 유형) | 계층의 각 엔터티는 동일한 속성과 구조를 갖습니다. | 동일한 엔터티 유형 내의 링크는 계층을 형성하거나 형성하지 않을 수 있습니다. | 각 수준에는 서로 다른 엔터티 유형과 특성이 있습니다. |
데이터베이스 예 | Employee-Manager 구조(자체 참조하는 직원 테이블). | 연결된 목록(각 노드에는 다음 참조가 있음). | 고객은 주문 → 주문 세부 정보(레벨마다 다른 구조)를 →합니다. |
코드 예제 | 하위 범주도 범주인 범주 트리입니다. | 노드가 다른 노드를 가리키는 연결된 목록입니다. | 고객, 주문 및 order_details 테이블이 있는 데이터베이스입니다. |
사용 사례 | 조직도, 중첩된 범주, 댓글 스레드. | 연결된 목록, 그래프 구조, 재귀 기반 작업. | 전자 상거래 주문, 송장, 판매 보고서. |
그리드 유형 및 가장 적합한 것은 무엇입니까?
TreeGrid: 자체 참조 데이터에 가장 적합
데이터셋이 레코드가 서로 일관되게 관련되는 구조화된 계층적 형식을 따르는 경우 TreeGrid를 선택하는 것이 이상적입니다.
TreeGrid는 각 직원이 자기 참조 구조로 부하 직원에게 보고하도록 할 수 있는 직원 관리 시스템에 적합합니다.
Advantages:
- 자체 참조 관계를 자동으로 처리합니다.
- 정렬, 필터링 및 편집과 같은 기본 제공 기능이 함께 제공됩니다.
- 대규모 데이터 세트에 맞게 잘 확장됩니다.
사용 사례:
- 직원 계층 구조
- 조직 구조
- 폴더/파일 관리

Tree Component: 불규칙한 데이터셋에 적합
계층의 여러 수준에 서로 다른 데이터 형식이 포함되어 있는 경우 트리 구성 요소는 필요한 유연성을 제공합니다. 균일한 구조를 기대하는 TreeGrid와 달리 Tree는 노드와 콘텐츠를 완전히 사용자 지정할 수 있습니다.
트리는 첫 번째 수준은 상위 수준 범주를 나타내고, 두 번째 수준은 개별 제품을 나타내고, 세 번째 수준은 구매 레코드를 포함하는 제품 범주를 시각화하는 데 유용합니다.
Advantages:
- 완전히 사용자 정의 가능한 구조와 외관
- 수준이 동일한 형식을 공유하지 않는 불규칙한 데이터 세트에 적합합니다.
- 성능 저하 없이 깊은 중첩 지원
사용 사례:
- Product categories and subcategories(제품 범주 및 하위 범주)
- 탐색 메뉴
- 콘텐츠 분류

계층적 그리드: 부모-자식 데이터 관계에 가장 적합
데이터 세트가 각 부모 엔터티에 동일한 유형의 여러 자식 레코드가 포함된 엄격한 부모-자식 관계를 따르는 경우 HGrid(Hierarchical Grid)를 선택하는 것이 가장 좋습니다.
계층적 그리드는 각 고객이 여러 주문을 가지고 있고 각 주문에 여러 주문 세부 정보가 포함된 고객 주문 관리에 적합합니다.
Advantages:
- 깊게 중첩된 데이터 구조 지원
- 자식 행의 동적 확장을 허용합니다.
- 필터링, 정렬 및 편집과 같은 기본 제공 기능을 제공합니다.
사용 사례:
- 주문 → 주문 세부 정보를 → 고객
- 프로젝트 → 작업 → 하위 작업
- 부서 → 직원 → 역할
올바른 구성 요소 선택
요약하자면, 올바른 구성 요소를 선택하는 것은 데이터 구조에 따라 달라집니다.
데이터 구조 | 최고의 구성 요소 | 혜택 |
Self-referencing hierarchy | 트리그리드 | 재귀 데이터 구조를 효율적으로 처리합니다. |
부모-자식 | 계층적 그리드(Hierarchical Grid) | 확장 가능한 수준으로 구조화된 관계를 표시합니다. |
이기종 계층(heterogeneous hierarchy) | 트리 구성 요소 | 서로 다른 레벨이 서로 다른 구조를 가질 때 유연성을 제공합니다. |

기본 제공 기능과 구성 가능성의 균형 맞추기
정렬, 필터링 및 편집과 같은 기본 제공 기능은 개발을 크게 단순화할 수 있지만 유연성이 떨어집니다. 구성 요소를 선택할 때:
- 구조화된 데이터, 자체 참조 데이터 또는 부모-자식 데이터로 작업할 때 즉시 사용 가능한 기능의 우선 순위를 지정합니다.
- 데이터가 엄격한 스키마를 따르지 않고 사용자 지정 상호 작용이 필요한 경우 flexibilit y를 선택합니다.
자체 참조, 동종 또는 완전히 이질적인 데이터 구조를 이해하면 애플리케이션의 요구 사항에 가장 적합한 구성 요소에 대해 정보에 입각한 결정을 내릴 수 있습니다.
아래의 데모 중심 세션에서는 App Builder를 사용하여 계층적 데이터를 처리하는 방법을 확인할 수 있습니다.
마무리
복잡한 데이터 세트를 효과적으로 처리하는 것은 애플리케이션 개발의 핵심 부분입니다. 깊게 중첩된 구조, 다양한 데이터 형식 또는 계층적 관계 중 어떤 작업을 하든 플랫 그리드, TreeGrid, 트리 또는 계층적 그리드와 같은 올바른 구성 요소를 선택하면 유용성과 성능에 큰 영향을 줄 수 있습니다.
이러한 구성 요소를 구현하는 데 도움이 필요하신가요? Discord, GitHub 또는 포럼을 통해 문의해 주세요. App Builder 워크플로를 간소화할 수 있는 방법을 아직 살펴보지 않았다면 지금 무료로 사용해 보세요! 계층적 데이터를 더 빠르고, 쉽고, 효율적으로 사용할 수 있도록 설계되었습니다.
한편, YouTube에서 이전 웨비나 녹화를 확인할 수 있습니다.
