Show GN: React Tree Component – 선언적으로 구현 가능한 React 트리 컴포넌트

React에서 트리(Tree) UI를 구현해야 할 때, 직접 상태 관리와 스타일링을 처리하다 보면 생각보다 많은 코드와 반복 작업이 필요합니다. 이를 단순화하기 위해 react-tree라는 오픈소스를 만들었습니다.

주요 특징

🌳 선언적 API
React 컴포넌트 방식으로 트리를 자연스럽게 선언할 수 있어, 파일 탐색기나 계층 구조 UI를 작성하기 쉽습니다.

<Tree>  
  <TreeItem>  
    <TreeItemLayout>Documents</TreeItemLayout>  
    <Tree>  
      <TreeItem>File A</TreeItem>  
      <TreeItem>File B</TreeItem>  
    </Tree>  
  </TreeItem>  
</Tree>  

📄 JSON 데이터 지원
TreeWithJson 컴포넌트를 사용하면 별도의 매핑 로직 없이 JSON 데이터를 그대로 트리 구조로 렌더링할 수 있습니다.
👉 Tree With JSON Demo

🎨 강력한 커스터마이징
각 노드를 원하는 UI로 바꿀 수 있도록 설계되어, 단순 텍스트가 아니라 아이콘, 버튼, 상태 표시 등을 쉽게 확장할 수 있습니다.

🔧 TypeScript 지원
제네릭 기반 타입 정의가 포함되어 있어 안전하게 사용할 수 있습니다.

설치

npm install @roseline124/react-tree  
yarn add @roseline124/react-tree  
pnpm add @roseline124/react-tree  

데모

Basic Tree
Tree With Json

GitHub

👉 https://github.com/roseline124/react-tree

---

React에서 트리를 구현해야 하는 분들께 도움이 되었으면 합니다.
피드백, 버그 리포트, 기능 제안 모두 환영합니다 🙌