[MUI] Treeview 파헤치기

MUI Treeview

Treeview는 밑의 사진처럼 계층적으로 나누어지는 컴포넌트이다.

원래 Mui/lab에 있던 컴포넌트였는데, Mui X로 넘어왔다!

TreeView를 쓸 일도 있기 때문에 하나하나 정리해보려고 한다.

Basic Tree View

제일 기본이 되는 TreeView

<TreeView
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}
>
  <TreeItem nodeId="1" label="Applications">
    <TreeItem nodeId="2" label="Calendar" />
  </TreeItem>
  <TreeItem nodeId="5" label="Documents">
    <TreeItem nodeId="10" label="OSS" />
    <TreeItem nodeId="6" label="MUI">
      <TreeItem nodeId="8" label="index.js" />
    </TreeItem>
  </TreeItem>
</TreeView>