RxTreeView

제품, 조직, 폴더처럼 부모와 자식 관계가 있는 데이터를 계층형 목록으로 표시합니다. 노드를 펼치고 접으면서 항목을 선택하며, 필요하면 화면별 템플릿으로 노드 내용을 바꿀 수 있습니다.

데이터 구성

트리 데이터는 List<RxTreeItemData> 형식의 Items에 전달합니다. 각 항목에는 안정적인 식별자, 표시 이름, 자식 목록과 펼침·선택에 필요한 상태를 구성합니다. 화면 정렬용 위치를 식별자로 사용하지 않습니다.

주요 항목

항목 선택

사용자가 노드를 누르면 OnItemClick로 전체 항목 객체가 전달됩니다. 선택 후 상세 정보를 조회할 때는 객체의 표시 이름이 아니라 고유 키를 사용합니다. 폴더 선택과 실제 업무 항목 선택의 동작이 다르면 항목 유형을 모델에 명시합니다.

펼침과 접기

AllowToggle이 켜져 있으면 자식이 있는 노드를 펼치고 접을 수 있습니다. 원격 데이터를 늦게 읽는 구조라면 펼침 시 로딩 상태를 표시하고, 같은 노드를 반복해서 펼쳐도 중복 요청이 발생하지 않도록 합니다.

사용자 정의 표시

ItemTemplate을 사용하면 아이콘, 상태 배지와 보조 정보를 노드에 추가할 수 있습니다. 한 노드 안에 여러 독립 버튼을 과도하게 넣으면 선택과 펼침 동작이 충돌하므로 핵심 명령만 남기고 추가 작업은 팝오버로 제공합니다.

읽기 전용

IsReadOnly는 편집이나 선택을 제한해야 하는 화면에서 사용합니다. 화면에서만 비활성화하는 것으로 권한을 집행하지 말고, 노드와 연결된 서버 데이터의 조회·수정 권한을 API에서도 확인합니다.

사용 예

<RxTreeView Items="productTree"
            AriaLabel="제품 문서 탐색"
            AllowToggle="true"
            OnItemClick="OpenProgram" />

목록을 다시 불러온 뒤에도 가능한 경우 항목 식별자를 기준으로 펼침과 선택 상태를 복원합니다.

접근성과 문제 확인

• 방향키, Enter와 Space로 노드 이동·펼침·선택이 가능한지 확인합니다.
• 아이콘만으로 상태를 구분하지 않고 텍스트나 접근성 이름을 제공합니다.
• 순환 참조가 있는 데이터를 트리로 만들지 않습니다.
• 자식이 많은 노드는 지연 조회나 범위 렌더링을 검토합니다.