React에서 he-tree-react로 드래그 앤 드롭 트리 뷰 만들기

Source: Dev.to

he‑tree‑react은 드래그‑앤‑드롭, 정렬 및 유연한 데이터 조작이 가능한 트리 컴포넌트를 구축하기 위한 강력한 React 라이브러리입니다. 직관적인 API를 제공하여 사용자가 노드 순서를 재배열하고, 브랜치 간에 항목을 이동하며, 데이터를 조직할 수 있는 인터랙티브한 계층 구조를 쉽게 만들 수 있습니다.

사전 요구 사항

• Node.js ≥ 14.0
• npm, yarn, 또는 pnpm
• React 프로젝트 (React ≥ 16.8) – 예: create‑react‑app 로 만든 프로젝트
• React 훅(useState, useEffect)에 대한 기본 지식
• JavaScript/TypeScript에 대한 친숙함
• 트리 구조와 드래그‑앤‑드롭 개념에 대한 이해

설치

# npm
npm install he-tree-react

# yarn
yarn add he-tree-react

# pnpm
pnpm add he-tree-react

설치가 완료되면 package.json에 다음과 같은 내용이 포함되어 있어야 합니다:

{
  "dependencies": {
    "he-tree-react": "^2.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

기본 Drag‑and‑Drop Tree

간단한 트리 컴포넌트를 생성합니다.

src/TreeExample.jsx

import React, { useState } from 'react';
import { Tree } from 'he-tree-react';

const initialData = [
  {
    id: 1,
    text: 'Item 1',
    children: [
      { id: 2, text: 'Child 1' },
      { id: 3, text: 'Child 2' }
    ]
  },
  {
    id: 4,
    text: 'Item 2',
    children: [{ id: 5, text: 'Child 3' }]
  },
  { id: 6, text: 'Item 3' }
];

function TreeExample() {
  const [data, setData] = useState(initialData);

  return (
    <Tree
      data={data}
      draggable
      droppable
      onChange={setData}
    />
  );
}

export default TreeExample;

src/App.jsx

import React from 'react';
import TreeExample from './TreeExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <TreeExample />
    </div>
  );
}

export default App;

앱을 실행하면 전체 드래그‑앤‑드롭 지원이 포함된 기본 트리가 표시됩니다.

핵심 개념

고급 예제 – 파일 탐색기

src/AdvancedTreeExample.jsx

import React, { useState } from 'react';
import { Tree } from 'he-tree-react';

const advancedData = [
  {
    id: 1,
    text: 'Documents',
    children: [
      { id: 2, text: 'Project 1' },
      { id: 3, text: 'Project 2' }
    ]
  },
  {
    id: 4,
    text: 'Images',
    children: [
      { id: 5, text: 'Vacation' },
      { id: 6, text: 'Family' }
    ]
  },
  { id: 7, text: 'Downloads' }
];

function AdvancedTreeExample() {
  const [data, setData] = useState(advancedData);
  const [selectedNode, setSelectedNode] = useState(null);

  const handleNodeClick = (node) => {
    setSelectedNode(node);
    console.log('Selected node:', node);
  };

  return (
    <div className="advanced-example">
      {/* Tree panel */}
      <section>
        <h3>File Tree</h3>
        <Tree
          data={data}
          draggable
          droppable
          onChange={setData}
          onNodeClick={handleNodeClick}
        />
      </section>

      {/* Details panel */}
      <section>
        <h3>Selected Node</h3>
        {selectedNode ? (
          <div>
            <p><strong>Text:</strong> {selectedNode.text}</p>
            <p><strong>ID:</strong> {selectedNode.id}</p>
            <p><strong>Has Children:</strong> {selectedNode.children ? 'Yes' : 'No'}</p>
          </div>
        ) : (
          <p>No node selected</p>
        )}
      </section>
    </div>
  );
}

export default AdvancedTreeExample;

이 예제는 다음을 보여줍니다:

• 여러 단계의 중첩
• 노드 선택 처리 (onNodeClick)
• 선택된 노드의 상세 정보 표시

실제 사용 사례 – 작업 조직자

src/TaskOrganizer.jsx

import React, { useState } from 'react';
import { Tree } from 'he-tree-react';

const initialTasks = [
  {
    id: 1,
    text: '📋 Project Planning',
    children: [
      { id: 2, text: '✅ Define requirements' },
      { id: 3, text: '⏳ Create timeline' },
      { id: 4, text: '📝 Write proposal' }
    ]
  },
  {
    id: 5,
    text: '💻 Development',
    children: [
      { id: 6, text: '✅ Setup project' },
      { id: 7, text: '⏳ Implement features' },
      { id: 8, text: '📝 Write tests' }
    ]
  },
  {
    id: 9,
    text: '🚀 Deployment',
    children: [{ id: 10, text: '📝 Prepare release' }]
  }
];

function TaskOrganizer() {
  const [tasks, setTasks] = useState(initialTasks);

  const handleChange = (newData) => {
    setTasks(newData);
    console.log('Tasks updated:', newData);
  };

  return (
    <div className="task-organizer">
      <h3>Task Organizer</h3>
      <p>Drag and drop tasks to reorganize them</p>
      <Tree
        data={tasks}
        draggable
        droppable
        onChange={handleChange}
      />
    </div>
  );
}

export default TaskOrganizer;

이 컴포넌트를 사용하여 사용자가 작업 순서를 재정렬하고, 하위 작업을 카테고리 간에 이동하며, 계층 구조를 최신 상태로 유지할 수 있습니다.

기능 요약

• Tree – 내장된 드래그‑앤‑드롭 기능을 가진 메인 컴포넌트.
• Node schema – id, text, 선택적 children.
• Props
  • data – 트리 데이터 배열.
  • onChange – 이동 후 업데이트된 트리를 전달받는 콜백.
  • draggable / droppable – 드래그‑앤‑드롭 활성화.
  • onNodeClick – 노드 선택을 위한 선택적 클릭 핸들러.
• State handling – 트리 데이터를 React 상태에 보관하고 onChange를 통해 업데이트.
• Nested structures – 기본적으로 무제한 깊이 지원.

다음 단계

1. 맞춤 노드 렌더링 추가 – renderNode prop(가능한 경우)를 사용하여 아이콘, 체크박스 등을 표시합니다.
2. 변경 사항 저장 – onChange 내부에서 API 호출을 통해 업데이트된 트리를 백엔드에 전송합니다.
3. 스타일링 – 정교한 UI를 위해 CSS 모듈이나 styled‑components를 사용해 기본 스타일을 재정의합니다.

he‑tree‑react와 함께 즐거운 코딩 되세요!

파일 관리자 컴포넌트

// src/FileManager.jsx
import React, { useState } from 'react';
import { Tree } from 'he-tree-react';

const initialFiles = [
  {
    id: 1,
    text: '📁 Documents',
    children: [
      { id: 2, text: '📄 report.pdf' },
      { id: 3, text: '📄 presentation.pptx' }
    ]
  },
  {
    id: 4,
    text: '📁 Images',
    children: [
      { id: 5, text: '🖼️ photo1.jpg' },
      { id: 6, text: '🖼️ photo2.png' }
    ]
  },
  { id: 7, text: '📄 readme.txt' }
];

function FileManager() {
  const [files, setFiles] = useState(initialFiles);

  return (
    <div className="file-manager">
      <h3>File Manager</h3>
      <p>Drag files and folders to reorganize</p>
      <Tree
        data={files}
        draggable
        droppable
        onChange={setFiles}
      />
    </div>
  );
}

export default FileManager;

앱 통합

// src/App.jsx
import React from 'react';
import TaskOrganizer from './TaskOrganizer';
import FileManager from './FileManager';
import './App.css';

function App() {
  return (
    <div className="App">
      <TaskOrganizer />
      <FileManager />
    </div>
  );
}

export default App;

이 예제가 시연하는 내용

• 작업 조직자 인터페이스
• 드래그‑앤‑드롭 기능
• 노드 재구성을 포함한 파일 관리자
• React 훅을 통한 상태 관리
• 대화형 트리 구조

Troubleshooting

다음 단계

이제 he‑tree‑react의 기본을 이해했으니, 더 고급 기능을 탐색할 수 있습니다:

• 사용자 정의 노드 렌더링
• 드래그 제약 조건 (예: 특정 노드만 드롭 허용)
• 트리 내 검색 및 필터링
• 노드 작업을 위한 컨텍스트 메뉴
• 사용자 정의 드래그 핸들
• 외부 상태 관리 라이브러리와 통합 (Redux, Zustand 등)

자세한 내용은 공식 저장소를 확인하세요:
🔗

요약

he‑tree‑react를 React 애플리케이션에 성공적으로 설정하고, 드래그‑앤‑드롭 트리 뷰를 만들었으며, 그 상태를 관리하는 방법을 배웠습니다. 이 라이브러리는 React에서 인터랙티브한 계층형 데이터 표시를 구축하기 위한 강력하고 유연한 솔루션을 제공합니다.

키워드

• he-tree-react
• he-tree-react 드래그 앤 드롭
• React 드래그 앤 드롭 트리
• he-tree-react 설치
• React 트리 컴포넌트
• he-tree-react 튜토리얼
• React 계층형 데이터
• he-tree-react 예제
• React 정렬 가능한 트리
• he-tree-react 설정
• React 트리 뷰 라이브러리
• he-tree-react 시작하기
• React 인터랙티브 트리
• he-tree-react 고급 사용법