React Material - Mui Tree View로 파일, 폴더 뷰 만들기 (Mui Directory Tree View)

리액트 전체 링크

 

참고

- mui tree view

- glob으로 파일, 폴더 목록 찾기
- Mui Tree View로 파일, 폴더 뷰 만들기
- Mui Tree View로 파일, 폴더 뷰 만들기 (with Node JS)
- Mui로 파일 브라우저 만들기 
- 파일 브라우저 만들기 (with Node JS)
- 파일 브라우저에서 파일 다운로드하기

 

mui tree view를 이용해 파일/폴더 뷰를 만들어보자.

먼저 @mui/lab을 설치한다.

$ npm install @mui/lab

 

mui tree view를 참고하면 가장 먼저 나오는 예시 코드는 다음과 같다.

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>
        <TreeItem nodeId="5" label="Documents">
          <TreeItem nodeId="10" label="OSS" />
          <TreeItem nodeId="6" label="MUI">
            <TreeItem nodeId="8" label="index.js" />
          </TreeItem>
        </TreeItem>
      </TreeView>
    </div>
  );
};

export default TreeViewExample;

---

이벤트 발생

 

만약 파일 브라우저를 만든다면, 해당 폴더를 선택했을 때, 파일이 보이도록 해야한다.

예를 들어 Applications에 포함된 파일을 알고 싶다면

"root 경로/Application" 의 목록을 가지고 오도록 이벤트를 발생시켜야 한다.

 

이 경우, 해당되는 TreeItem에 onClick 이벤트를 추가하면 된다.

innerText를 이용하면 Applications를 출력할 수 있다.

<TreeItem
    nodeId="1"
    label="Applications"
    onClick={(e) => console.log(e.target.innerText)}
>

---

선택 불가 처리

 

특정 트리를 disabled로 만들고 싶다면 TreeView에 disabledItemsFocusable={true} 를 추가한다. 

그리고 해당되는 TreeItem에 disabled={true}를 설정하면 된다.

아래 코드는 Document 폴더의 MUI 폴더를 선택하지 못하도록 처리하였다.

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 />}
        disabledItemsFocusable={true}
        sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: "auto" }}
      >
        <TreeItem
          nodeId="1"
          label="Applications"
          onClick={(e) => console.log(e.target.innerText)}
        >
          <TreeItem nodeId="2" label="Calendar" />
        </TreeItem>
        <TreeItem nodeId="5" label="Documents">
          <TreeItem nodeId="10" label="OSS" />
          <TreeItem nodeId="6" label="MUI" disabled={true}>
            <TreeItem nodeId="8" label="index.js" />
          </TreeItem>
        </TreeItem>
      </TreeView>
    </div>
  );
};

export default TreeViewExample;

 

결과는 링크에서 확인하자.