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

> Clean Markdown view of GeekNews topic #22920. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=22920](https://news.hada.io/topic?id=22920)
- GeekNews Markdown: [https://news.hada.io/topic/22920.md](https://news.hada.io/topic/22920.md)
- Type: show
- Author: [guseod24](https://news.hada.io/@guseod24)
- Published: 2025-09-05T13:30:05+09:00
- Updated: 2025-09-05T13:30:05+09:00
- Original source: [npmjs.com](https://www.npmjs.com/package/@roseline124/react-tree)
- Points: 2
- Comments: 0

## Topic Body

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](https://codesandbox.io/p/sandbox/sqrr9q)  
[Tree With Json](https://codesandbox.io/p/sandbox/sgt5nq)  
  
##### GitHub  
  
👉 https://github.com/roseline124/react-tree  
  
---  
  
React에서 트리를 구현해야 하는 분들께 도움이 되었으면 합니다.  
피드백, 버그 리포트, 기능 제안 모두 환영합니다 🙌

## Comments



_No public comments on this page._