Mui Tree View 에서 labal 이름 가지고 오기

1. MUI 설치

MUI 설치 시 일괄 설치가 되는 것 같은데.. 안되어 있다면 @MUI/LAB 을 설치해주도록 하자.

$ npm install @mui/lab

2. MUI 테스트용 treeview 생성

import React from "react";

import TreeView from "@mui/lab/TreeView";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import TreeItem from "@mui/lab/TreeItem";

const TreeViewExample = () => {
  return (
    <div>
      <TreeView
            aria-label="file system navigator"
            defaultCollapseIcon={<ExpandMoreIcon />}
            defaultExpandIcon={<ChevronRightIcon />}
            sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: "auto" }}
          >
            <TreeItem nodeId="1" label="Applications" >
              <TreeItem nodeId="2" label="Calendar" />
              <TreeItem nodeId="3" label="Chrome" />
              <TreeItem nodeId="4" label="Webstorm" />
            </TreeItem>
            <TreeItem nodeId="5" label="Documents">
              <TreeItem nodeId="10" label="OSS" />
              <TreeItem nodeId="6" label="MUI">
                <TreeItem nodeId="7" label="src">
                <TreeItem nodeId="8" label="index.js" />
                <TreeItem nodeId="9" label="tree-view.js" />
                </TreeItem>
              </TreeItem>
            </TreeItem>
          </TreeView>
    </div>
  );
};

export default TreeViewExample;

3. label 가지고 오는 방법

보통 속성에 labeltext 를 가지고 오게 되어 있는데..

여기의 경우 innerText 나 outerText 를 사용해야 원하는 값을 가지고 올 수 있게 되어 있는 것 같다.

(아직 못 찾은 것일수도 있음)

import React from "react";

import TreeView from "@mui/lab/TreeView";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import TreeItem from "@mui/lab/TreeItem";

const TreeViewExample = () => {
  return (
    <div>
      <TreeView
            aria-label="file system navigator"
            defaultCollapseIcon={<ExpandMoreIcon />}
            defaultExpandIcon={<ChevronRightIcon />}
            sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: "auto" }}
          >
            <TreeItem nodeId="1" label="Applications" onClick={(e)=>console.log(e.target.outerText)}>
              <TreeItem nodeId="2" label="Calendar" onClick={(e)=>console.log(e.target.innerText)}/>
              <TreeItem nodeId="3" label="Chrome" />
              <TreeItem nodeId="4" label="Webstorm" />
            </TreeItem>
            <TreeItem nodeId="5" label="Documents">
              <TreeItem nodeId="10" label="OSS" />
              <TreeItem nodeId="6" label="MUI">
                <TreeItem nodeId="7" label="src">
                <TreeItem nodeId="8" label="index.js" onClick={(e)=>console.log(e.target.innerText)}/>
                <TreeItem nodeId="9" label="tree-view.js" onClick={(e)=>console.log(e.target.innerText)}/>
                </TreeItem>
              </TreeItem>
            </TreeItem>
          </TreeView>
    </div>
  );
};

export default TreeViewExample;

필자의 경우 innerText 와 outerText 로 가지고 오는 방법 두가지를 모두 적어보았다.

Applications 클릭시 Applications 가 console에 뜨도록 해두었다.