Skip to Content
ComponentsFoundationTree

Tree

계층(Hierarchy) 구조의 데이터를 트리 형태로 출력하는 컴포넌트

개요

Foundation Tree는 계층형 데이터를 트리 구조로 시각화하는 컴포넌트입니다. 펼침/접힘, 들여쓰기, 노드 선택, 연결선, 아이콘 등 기본 트리 기능을 제공합니다.

주요 특징

  • ✅ 계층 구조 표시: TreeItem 배열로 트리 데이터 바인딩
  • ✅ 펼침/접힘: 하위 노드 존재 시 ChevronRight 아이콘으로 토글
  • ✅ 들여쓰기: depth 단계별 indent 간격 조절
  • ✅ 노드 선택: 단일/다중 선택 모드 지원
  • ✅ 연결선: showLines로 계층 연결선 표시
  • ✅ 아이콘: 폴더/파일 기본 아이콘 및 커스텀 아이콘
  • ✅ 애니메이션: 펼침/접힘 시 부드러운 전환 효과
  • ✅ 접근성: 키보드 탐색 지원

사용 예시

기본 트리 표시

src
components
App.tsx
index.tsx
package.json
tsconfig.json

노드 선택

src
App.tsx
index.tsx
package.json
tsconfig.json

다중 선택

src
App.tsx
index.tsx
package.json
tsconfig.json

Ctrl/Cmd + 클릭으로 여러 노드를 선택할 수 있습니다.

들여쓰기 조절

root
child-1
grandchild-1
child-2

API Reference

Props

PropTypeDefaultDescription
itemsTreeItem[]-트리 데이터 배열
defaultExpandedIdsstring[][]초기 펼쳐진 노드 ID 목록
selectablebooleantrue노드 선택 가능 여부
multiSelectbooleanfalse다중 선택 모드
selectedIdsstring[]-선택된 노드 ID (제어 모드)
showLinesbooleantrue연결선 표시 여부
showIconsbooleantrue아이콘 표시 여부
indentnumber20depth별 들여쓰기 간격 (px)
animateExpandbooleantrue펼침/접힘 애니메이션 사용
classNamestring-추가 CSS 클래스

TreeItem

PropTypeDescription
idstring노드 고유 ID
labelstring노드 표시 텍스트
iconReactNode커스텀 아이콘
childrenTreeItem[]하위 노드 배열

Events

EventTypeDescription
onSelectionChange(selectedIds: string[]) => void선택 변경 시 호출

기본 사용법

import { Tree, type TreeItem } from "@vortex/ui-foundation"
 
const items: TreeItem[] = [
  {
    id: "root",
    label: "Root",
    children: [
      { id: "child-1", label: "Child 1" },
      { id: "child-2", label: "Child 2" },
    ],
  },
]
 
<Tree items={items} selectable />

접근성

권장 사항

  • ✅ 노드 클릭으로 선택/펼침 동작 수행
  • ✅ 포커스 상태가 시각적으로 구분됨
  • ❌ 깊은 중첩(5단계 이상)은 사용성 저하 주의

관련 컴포넌트

  • Tree (iCignal): 체크박스, 검색, Drag & Drop 등 확장 기능 포함
Last updated on
ToggleGroupTypography