[오류리뷰] rc-tree(1): 정리

Yunseok Choi·2024년 3월 27일

EARTH-IDE-N 프로젝트

목록 보기

8/9

나와 같이 rc-tree에 고통받은 자들을 위하여.

1️⃣ rc-tree 라이브러리 설치

npm i rc-tree

설치는 이지하다.

2️⃣ 기본 사용 방법

import Tree from "rc-tree";
import "rc-tree/assets/index.css";

const treeData = [
  {
    key: "1",
    title: "folder 1",
    children: [
      { key: "1-1", title: "Node 1-1.js" },
      { key: "1-2", title: "Node 1-2.ts" },
      {
        key: "3",
        title: "folder 3",
        children: [
          { key: "3-1", title: "Node 3-1.html" },
          { key: "3-2", title: "Node 3-2.css" },
        ],
      },
    ],
  },
  {
    key: "2",
    title: "folder 2",
    children: [
      { key: "2-1", title: "Node 2-1.json" },
      { key: "2-2", title: "Node 2-2.tsx" },
    ],
  },
];

<Tree treeData={treeData}></Tree>

Tree와 rc-tree 라이브러리의 index.css를 임포트하고 <Tree>컴포넌트를 쓰기만 하면 된다.
그리고 treeData 옵션을 줘서 안에 객체를 준다.. key와 title은 기본으로 들어가야 되고, 여기서 children 유무에 따라 디렉토리인가 파일인가가 결정된다.

3️⃣ 옵션들…(내가 가장 고통받았던 부분)

<Tree
  treeData={treeData}
  switcherIcon={switcherIcon}
  showIcon={false}
  selectable={true}
  draggable={true}
  allowDrop={() => true}
  expandAction={"click"}
></Tree>

첫번째 treeData는 위에서 이미 설명해서 넘어가고..
rc-tree document를 보면 이해가 가는 분들도 있겠지만 나는 많이 이해가 어려웠던거 같다…

다른 부분에서는 그나마 쉬운 옵션들이었지만,(하나하나 추가하면 바로 그 이름 그대로 동작해 이해가 쉬울 것이다.) 아이콘을 처리하는 부분에서 애를 많이 먹었다.

먼저 showIcon={false} . showIcon은 rc-tree의 기본 이미지를 제공할지에 대한 여부이다.

이 기본 이미지에 파일 문서 이미지 등 몇개 안되는 옵션밖에 없어서 다른 여러가지 파일들을 추가하고 싶다면 false를 하는 것을 추천한다. 이걸 적용한 후에 보면 이름만 남고 이미지는 사라져 있을 것이다. 그리고 다시 채우는 걸 switcherIcon={() ⇒ {}}로 해결한다.

⇒ 이 부분에서 애를 먹었던거 같다. 다큐먼트에서 함수라고는 나와 있었지만 어떻게 해야하는지 도저히 감이 오지 않았다.(구글링을 해도 내가 못하는 건가 예시가 진짜 정말 없었다.) 결국 계속 생각하다가 다른 예시를 찾고 겨우겨우 해결할 수 있었다.

const switcherIcon = (extension) => {
    let icon = extension.title.toString().split(".").pop();

    const isDirectory = extension.data.children;
    if (isDirectory) {
      icon = extension.expanded ? "openFolder" : "closedFolder";
		} else if (!extension.title.includes(".")) {
      icon = "draft";
    }

    const iconSvg = (
      <img src={`/svg/${icon}.svg`} className={styles.fileIcon} />
    );

    return iconSvg;
  };

나는 이런식으로 만들었는데, 일단 svg파일을 다 다운받아서 경로를 확장자명에 따라 불러오는 방식으로 만들었다. switcherIcon에서 데이터를 불러(extension), 배열의 title에서 앞에 이름은 지우고 남은 확장자명을 svg파일 경로에 넣었다. 폴더(디렉토리)의 경우에는 확장자명이 없어서, 내가 위에 설명했듯, 파일과 폴더의 차이는 children의 유무에 따라 달라지므로 children이 있으면 expanded(rc tree 기본 옵션)의 상황에 따라 "openFolder" : "closedFolder" 으로 줬다.

이렇게 해결하는 듯 싶어 정말 기분이 좋았지만..

폴더 이미지 뒤쪽에 뭔가 다른 이미지가 계속 보이는 것이다. 이게 뭐지 싶어 개발자 도구로 찾아보니 기본 이미지가 계속 불러와지는 것이다.(왜 그런지 모르겠음. 분명 false로 줬는데..) 그래서 background-image: url(…)이 들어가는 클래스가 있는 node-modules의 rc-tree의 index.css로 가서 그 옵션을 지웠다. 당연히 해결될 줄 알았다……. 그대로였다.

너무 화가나서 계속 찾아보다가 그냥 npm 끊고 다시 연결해서 봤는데,, 사라져있다.. ㅏ하하하핳핳ㅎ하하하하.. 아마 node_modules에 있는 옵션은 바로바로 렌더링이 안되고 한번 끊었다가 다시 렌더링해야되는 거 같다.