Tree
개요
Tree 컴포넌트는 계층형 데이터를 표시하며 List 컴포넌트의 특성을 상속하는 UI 컴포넌트입니다. 트리 구조의 데이터를 효과적으로 관리하고 사용자 상호작용을 제공합니다.
주요 기능
1. 커스텀 렌더러
트리의 각 노드를 사용자가 원하는 형태로 렌더링할 수 있습니다. 아이콘, 텍스트, 버튼 등을 자유롭게 조합하여 노드를 표현할 수 있습니다.
관련 항목 보기
- 속성
2. 행 개수 지정
한 번에 화면에 표시할 행의 개수를 설정할 수 있습니다. 이를 통해 한 화면에 보이는 데이터를 유동적으로 조정할 수 있습니다.
관련 항목 보기
- 속성
3. 외부 스크롤러
Tree 컴포넌트 자체의 스크롤뿐만 아니라, Tree를 감싸는 부모 요소의 스크롤을 기준으로 동작할 수 있습니다. 이를 통해 더 유연한 레이아웃 구성이 가능합니다.
관련 항목 보기
4. 상호 작용
사용자가 노드를 선택하거나 포커스를 이동하는 등의 상호작용을 처리할 수 있습니다. 노드 선택 시 이벤트를 발생시키거나, 특정 노드에 포커스를 맞출 수 있습니다.
관련 항목 보기
5. 노드 확장/축소
사용자가 트리 노드를 확장하거나 축소할 수 있습니다. 이를 통해 계층 구조를 탐색하고, 필요한 정보만 표시할 수 있습니다.
관련 항목 보기
6. 자동 노드 확장
특정 조건에 따라 노드를 자동으로 확장할 수 있습니다. 예를 들어, 특정 깊이의 노드만 자동으로 확장되도록 설정할 수 있습니다.
관련 항목 보기
7. 노드 탐색
트리의 모든 노드를 탐색할 수 있는 기능을 제공합니다. 이를 통해 특정 조건에 맞는 노드를 검색하거나, 모든 노드에 대한 작업을 수행할 수 있습니다.
관련 항목 보기
8.노드 추가/삭제
특정 노드의 부모 노드나 형제 노드에 접근할 수 있으며, 노드를 추가하거나 삭제할 수 있습니다. 이를 통해 동적으로 트리 구조를 변경할 수 있습니다.
관련 항목 보기
9. 드래그 앤 드랍
노드를 드래그 앤 드랍하여 순서를 변경하거나, 다른 부모 노드 아래로 이동시킬 수 있습니다. 이를 통해 사용자가 트리 구조를 쉽게 재구성할 수 있습니다.