ObjectExplorer
전체 객체 목록을 폴더/파일 아이콘이 포함된 트리 구조로 표시하는 탐색 컴포넌트
개요
ObjectExplorer는 전체 객체 목록 데이터를 폴더/파일 아이콘이 포함된 트리 구조로 표시하는 컴포넌트입니다. 부모 컨테이너 높이에 자동으로 맞춰지며, 노드별 커스텀 상태 배지를 표시할 수 있습니다.
주요 특징
- ✅ 객체 트리 표시: 자식이 있는 노드는 폴더, 리프 노드는 파일 아이콘
- ✅ 펼침/접힘: 노드 클릭으로 하위 항목 토글, defaultExpandAll로 초기 전체 펼침
- ✅ 자동 높이: autoHeight로 부모 컨테이너 높이에 자동 맞춤 (기본 true)
- ✅ 커스텀 배지: renderBadge로 노드 라벨 앞에 상태 아이콘/배지 표시
- ✅ 유연한 필드 매핑: labelKey / idKey / childrenKey로 데이터 필드명 지정
- ✅ 표시 제어: visible prop으로 전체 표시/숨김, emptyText로 빈 상태 메시지 지정
기본 사용
items에 계층 데이터를 전달합니다. 자식이 있는 노드를 클릭하면 펼침/접힘이 전환됩니다.
Preview
화면
데이터
초기 전체 펼침
defaultExpandAll을 true로 설정하면 모든 노드를 펼친 상태로 렌더링합니다.
Preview
화면
로그인 화면
메인 화면
설정 화면
데이터
사용자 데이터셋
주문 데이터셋
커스텀 상태 배지
renderBadge 콜백으로 노드 라벨 앞에 상태 아이콘이나 배지를 표시합니다. 콜백에는 원본 데이터 항목이 전달됩니다.
Preview
화면
로그인 화면
메인 화면
설정 화면
데이터
사용자 데이터셋
주문 데이터셋
노드 클릭 이벤트
onNodeClick 콜백에 클릭한 노드의 원본 데이터 항목이 전달됩니다.
Preview
화면
데이터
선택된 노드: 없음
빈 상태
데이터가 없으면 emptyText 메시지를 표시합니다.
Preview
표시할 객체가 없습니다
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ObjectExplorerDataItem[] | [] | 트리 데이터 배열 |
labelKey | string | "label" | 표시 이름 필드명 |
idKey | string | "id" | 식별자 필드명 |
childrenKey | string | "children" | 하위 항목 필드명 |
autoHeight | boolean | true | 부모 높이 자동 맞춤 |
renderBadge | (node: ObjectExplorerDataItem) => ReactNode | - | 노드별 커스텀 배지 렌더 |
onNodeClick | (node: ObjectExplorerDataItem) => void | - | 노드 클릭 콜백 (원본 항목 전달) |
defaultExpandAll | boolean | false | 초기 전체 펼침 여부 |
visible | boolean | true | 표시 여부 (false → 렌더 안 함) |
emptyText | string | "데이터가 없습니다" | 빈 상태 메시지 |
className | string | - | 컨테이너 CSS 클래스 |
style | CSSProperties | - | 인라인 스타일 |
Events
| Event | Type | Description |
|---|---|---|
onNodeClick | (node: ObjectExplorerDataItem) => void | 노드 클릭 시 원본 데이터 전달 |
접근성
권장 사항
- ✅ 펼침/접힘 상태를 chevron 아이콘으로 시각적으로 구분
- ✅ 상태 배지는 색상 외에도 텍스트/툴팁으로 의미를 보조 전달
- ❌ 상태를 색상만으로 구분하지 않기 (색맹 사용자 고려)
관련 컴포넌트
Last updated on