# 트리 데이터

트리는 폴더·조직도처럼 부모와 자식 관계가 있는 데이터를 들여쓰기와 펼침 버튼으로 보여 줍니다. 동일한 값끼리 묶는 행 그룹과 달리 부모 관계가 데이터에 이미 존재합니다.

Canonical: https://grid.syidax.com/ko/docs/features/tree-data/

<a id="understand"></a>

## 동작 원리와 선택 기준

경로 배열을 반환하는 getDataPath 또는 ID와 부모 ID 필드를 사용합니다. 둘을 함께 설정하면 경로 방식이 우선하므로 한 화면에서는 하나의 규칙을 정하는 것이 좋습니다.

이 기능을 제품에서 사용하려면 Pro 패키지와 유효한 라이선스가 필요합니다. 설정 이름이 같더라도 Community에서 Pro 기능이 활성화되는 것은 아닙니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

<a id="example-1"></a>

## 예제 1. 경로 배열로 조직 표시

각 행의 path 배열에 루트부터 현재 항목까지의 경로를 넣습니다.

```javascript
grid.rowData = [
  { id: 'eng', name: '개발', path: ['회사', '개발'] },
  { id: 'web', name: '웹', path: ['회사', '개발', '웹'] },
];
grid.getRowId = row => row.id;
grid.columnDefs = [{ field: 'name', headerName: '조직' }];
grid.getDataPath = row => row.path;
```

결과 확인: 개발 아래에 웹이 나타납니다. 경로 라벨 변경과 안정적인 행 ID 변경은 서로 다른 작업입니다.

<a id="example-2"></a>

## 예제 2. 부모 ID로 연결

서버가 평면 목록을 반환하면 경로 배열로 변환하는 대신 연결 필드를 지정할 수 있습니다.

```javascript
grid.getDataPath = undefined;
grid.rowData = [
  { id: 'root', parentId: null, name: '본사' },
  { id: 'sales', parentId: 'root', name: '영업' },
];
grid.treeIdField = 'id';
grid.treeParentField = 'parentId';
grid.treeLabelField = 'name';
```

결과 확인: id와 parentId의 관계로 트리가 구성됩니다. 중복 ID·순환 부모·없는 부모는 데이터를 공급하기 전에 검사하세요.

<a id="example-3"></a>

## 예제 3. 처음에는 요약만 표시

초기 데이터를 반영한 뒤 모든 가지를 접고 필요한 경로만 펼칩니다.

```javascript
await grid.collapseAllTreeNodes();
// 경로 방식 예제에 적용할 때:
await grid.setTreeNodeExpanded(['회사', '개발'], true);
```

결과 확인: 자식이 없는 잎 노드는 펼칠 대상이 아닙니다. 실제 존재하는 경로인지 확인하고 호출합니다.

<a id="pitfalls"></a>

## 조합할 때와 문제를 해결할 때

트리의 표시 순서나 들여쓰기를 이용해 서버의 부모 ID를 역으로 만들지 마세요. 원본 관계를 별도로 유지합니다.

트리를 사용하지 않는 화면으로 전환할 때는 getDataPath와 연결 필드를 함께 정리해 이전 계층 설정이 남지 않게 합니다.

<a id="related-api"></a>

## 이 기능에 사용하는 API

- [getDataPath](https://grid.syidax.com/ko/docs/options/getDataPath.md) — 행의 루트부터 현재 노드까지 경로 배열을 반환해 트리를 만듭니다. ID 기반 트리 설정보다 우선합니다.
- [treeIdField](https://grid.syidax.com/ko/docs/options/treeIdField.md) — 부모 ID 방식 트리에서 각 노드의 ID를 담은 필드입니다. treeParentField와 함께 지정합니다.
- [treeParentField](https://grid.syidax.com/ko/docs/options/treeParentField.md) — 부모 ID 방식 트리에서 부모 노드의 ID를 담은 필드입니다.
- [treeLabelField](https://grid.syidax.com/ko/docs/options/treeLabelField.md) — 부모 ID 방식 트리에서 표시할 라벨 필드입니다. 지정하지 않으면 ID를 사용합니다.
- [setTreeNodeExpanded](https://grid.syidax.com/ko/docs/methods/setTreeNodeExpanded.md) — 경로로 지정한 트리 노드를 펼치거나 접습니다. 잎 노드나 존재하지 않는 경로는 펼칠 수 없습니다.
- [expandAllTreeNodes](https://grid.syidax.com/ko/docs/methods/expandAllTreeNodes.md) — 현재 트리의 접을 수 있는 노드를 모두 펼칩니다.
- [collapseAllTreeNodes](https://grid.syidax.com/ko/docs/methods/collapseAllTreeNodes.md) — 현재 트리의 가지 노드를 모두 접습니다.
- [reparentRows](https://grid.syidax.com/ko/docs/methods/reparentRows.md) — 트리 행의 부모를 변경하고 적용·거절 결과를 반환합니다. 순환·권한·행 모델 제한을 확인합니다.
- [treeNodeToggled](https://grid.syidax.com/ko/docs/events/treeNodeToggled.md) — 트리 노드의 펼침 상태가 바뀌었을 때 발생합니다. 경로와 expanded를 확인합니다.
- [treeReparented](https://grid.syidax.com/ko/docs/events/treeReparented.md) — 트리 행의 부모 변경 결과를 알립니다. 앱 서버의 부모 관계 저장과 연결할 수 있습니다.

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/tree-data) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.