react-arborist 정리

1️⃣ 인트로

Web IDE 프로젝트를 위해서 여러가지 라이브러리를 사용했고, 그 중 파일트리를 위해 react-arborist 라이브러리를 사용하였다. 처음 보았을 때는 데이터 처리 기본 함수들이 되게 잘 되어있다고 생각했는데(맞긴 함), 막상 백엔드와 연결한다고 생각하니까 CRUD 로직을 직접 다 만들어야 된다는 것을 깨달았다.(생각해보니 당연한 거임.. 백엔드와 어떤 식으로 주고받는지는 다 달라서 이 라이브러리가 알지를 못함.) 하지만 이 기능들을 도와주는 기본 내제 함수들이 도움이 되었다.

2️⃣ 설치 및 기본 생성법

npm i react-arboirst

const data = [
  {
    id: "1",
    name: "folder_1",
    children: [
      { id: "1-1", name: "file1" },
      { id: "1-2", name: "file2" },
    ],
  },
];
//---
<Tree 
width={"100%"}
height={1000}
indent={17}
data={data}
}>{node}</Tree>

설치 뒤에 넣고 싶은 컴포넌트에 이 요소를 넣으면 된다. data는 위와 같은 형식으로 되어있어야 한다. children의 유무에 따라 파일인지 디렉토리인지 구분된다.

3️⃣ Node

위의 Tree요소에서 {node}에 관해 이야기할 차례이다. node에는 각 노드들을 나타내는 코드가 들어간다.(map함수같은거라고 생각하면 쉬울거 같다.) 기본 기능의 예제들은 밑의 주소에 아주 잘 나와있다.

Using react-arborist to create tree components for React - LogRocket Blog

4️⃣ 이제 진짜 CRUD 함수

서버와의 통신으로 데이터를 관리하려면 함수들을 직접 다 만들어줘야 한다. 처음에는 이해가 전혀 안되서 시작도 못하고 며칠을 계속 삽질해대며 시간낭비를 했고 결국 알아냈다.

필자는 Tree에 쓰는 onCreate의 기능을 완전히 이해하지 못했다. 다른 사람들의 코드를 보고, 문서를 봐도 어떻게 onCreate가 발동되는지 이해가 가지 않았지만, 결국 이해를 했다 : Tree요소에 ref를 추가시키고, 버튼을 만들어서 onClick에 ref.current.createLeaf()나 ref.current.createInternal()을 붙여서 이 버튼을 누르면 node.edit()상태로 들어간다. 여기서 엔터(커스텀)를 눌러 node.submit()을 발동시키면 onCreate가 발동되는 것이었다.
그리고 이 onCreate에 들어가는 함수를 직접 만들어야 된다.

  const onCreate: CreateHandler<nodeType> = ({ type, parentId }) => {
    const newNode: nodeType = {
      id: uuidv4(),
      name: "",
      type: type,
      parentId: parentId === null ? undefined : parentId,
      content: "",
    };
    addNode(newNode);
    return newNode;
  };

이건 필자가 코드들을 참고해서 만든 함수이다.
먼저 ref.current.createLeaf()와ref.current.createInternal()의 함수에 따라 type이 leaf인지 internal인지 달라진다(즉 타입은 굳이 넘겨줄 필요가 없음). 그래서 node.submit을 할때 그대로 다른 정보(parentId, …)와 함께 type을 onCreate함수로 넘겨준다.

6️⃣ 끝

나머지 수정, 삭제 함수들도 구현했지만, 아직 초보이다 보니 함수의 퀄리티가 많이 떨어지는 것 같다. 결국 필자에게 가장 중요했던 건 위 onCreate가 어떻게 발동되는지 이해할 수 있는 것에 대한 여부가 가장 중요했던거 같다.

그것을 이해하고 나서 나머지 함수들의 90%는 하루만에 다 만들어졌기 때문이다. 이것만 이해하고 나서 독자들도 이 라이브러리를 사용할 때 서버와 통신하는 함수를 만들 수 있을 거라 생각한다.