Tremor를 사용하여 React에서 멋진 대시보드 만들기

2023/01/24

React에서 대시보드와 같은 복잡한 사용자 인터페이스를 구축하는 것은 처음부터 시작하는 경우 어려울 수 있습니다. 고맙게도 그렇게 할 필요가 없습니다.

사용할 수 있는 최고의 구성 요소 라이브러리 중 하나는 약간의 노력으로 React에서 최신 반응형 대시보드를 만들 수 있는 Tremor입니다. Tremor를 사용하여 React에서 대시보드를 만드는 방법을 알아보세요.

떨림이란 무엇입니까?

Tremor는 React에서 대시보드를 구축하기 위한 최신 오픈 소스 저수준 UI 구성 요소 라이브러리입니다. Tremor는 Tailwind CSS, React 및 Recharts(React용 또 다른 구성 요소 기반 차트 라이브러리) 위에 구축됩니다. 또한 Heroicons의 아이콘을 사용합니다.

차트, 카드 및 입력 요소와 같은 환상적인 분석 인터페이스를 구축하는 데 필요한 모든 필수 요소가 포함된 20개 이상의 구성 요소를 자랑합니다. 라이브러리에는 완전한 대시보드를 만들기 위해 결합할 수 있는 배지, 버튼, 드롭다운 및 탭과 같은 작은 모듈식 구성 요소가 포함되어 있습니다.

Tremor가 눈에 띄는 이유는 독단적이어서 라이브러리의 결정에 동의하는 한 전문적인 수준의 대시보드를 손쉽게 실행할 수 있다는 것입니다.

물론 Tremor는 사용자 지정을 지원하며 React의 소품 시스템을 통해 쉽게 수행할 수 있습니다.

떨림을 시작하는 방법

create-react-app 패키지(또는 원하는 경우 Vite) 를 사용하여 새 React 앱을 생성하여 시작합니다 .

시스템에 Node.js 및 npm이 이미 설치되어 있어야 합니다. 명령줄에서 node –version 을 실행 한 다음 npm –version 을 실행하여 이를 확인할 수 있습니다 . 두 명령 중 하나가 누락된 경우 간단한 프로세스를 사용하여 설치할 수 있습니다. 예를 들어 Windows에 Node.js 및 npm을 설치하려면 이 가이드를 참조하세요.

Tremor로 React 프로젝트 설정

터미널을 열고 cd 명령 을 사용하여 원하는 디렉토리로 이동합니다 .
npx create-react-app tremor-tutorial 을 실행 합니다. 이 명령은 시스템의 현재 디렉토리에 tremor-tutorial 이라는 새로운 React 애플리케이션을 생성합니다 .
cd tremor-tutorial 을 실행하여 앱 디렉토리로 전환합니다 .
다음 명령을 사용하여 React 프로젝트에 Tremor를 설치합니다. npm install @tremor/react
Tremor를 설치했으면 가져오기 맨 아래에 다음 줄을 추가하여 App.js (또는 Vite를 사용한 경우 main.jsx )에서 패키지를 가져옵니다. import "@tremor/react/dist/esm/tremor.css";

Tremor는 Tailwind CSS를 사용하지만 라이브러리를 사용하기 위해 React 앱에 설치할 필요는 없습니다. 이는 Tremor가 이미 내부적으로 Tailwind를 설정했기 때문입니다. 그러나 원하는 경우 React에 Tailwind CSS 설치에 대한 자습서를 확인하십시오.

다음으로 다음 명령을 사용하여 프로젝트에 Heroicons를 설치합니다.

npm i heroicons@1.0.6 @tremor/react

이제 src/App.js 파일에서 불필요한 코드를 제거해 보겠습니다. 다음은 App.js 의 시작 코드입니다 .

import "./App.css"; import "@tremor/react/dist/esm/tremor.css"; export default function App() { return ( <div> <h1>Our Awesome React Dashboard</h1> </div> ); }

다음으로 src 폴더에 전용 구성 요소 하위 폴더를 만듭니다 . 해당 구성 요소 폴더에서 새 Dashboard.js 파일을 만들고 다음 코드를 추가합니다.

function Dashboard() { return <div>Dashboard</div>; }

export default Dashboard;

다른 가져오기 후에 다음 문을 추가하여 App.js 에서 대시보드 구성 요소를 가져옵니다.

import Dashboard from "./components/Dashboard";

마지막으로 h1 요소 아래에 <Dashboard /> 를 추가하여 React 앱에 구성 요소를 표시합니다 .

Tremor로 대시보드 만들기

최소한의 소란으로 Tremor를 사용하여 완전한 대시보드를 만들려면 사용 가능한 블록 중 하나를 선택하십시오. 블록은 서로 다른 작은 모듈식 구성 요소로 구성된 사전 구축된 레이아웃입니다.

좋은 출발점 은 사용할 수 있는 다양한 유형의 미리 빌드된 블록 구성 요소를 보여주는 Tremor의 블록 섹션입니다. 예를 들어 레이아웃 셸을 사용하면 서로 다른 구성 요소를 결합하여 대시보드를 만들 수 있습니다.

먼저 Dashboard.js 파일 에 다음 코드를 추가합니다.

import { Card, Title, Text, ColGrid, AreaChart, ProgressBar, Metric, Flex, } from "@tremor/react";

function Dashboard() { return ( <main> <Title>Sales Dashboard</Title> <Text>This is a sample dashboard built with Tremor.</Text>


      {/* Main section */}
      <Card marginTop="mt-6">
        <div className="h-96" />
      </Card>
      {/* KPI section */}
      <ColGrid numColsMd={2} gapX="gap-x-6" gapY="gap-y-6" marginTop="mt-6">
        <Card>
          {/* Placeholder to set height */}
          <div className="h-28" />
        </Card>
      </ColGrid>
    </main>
  );
}
export default Dashboard;

셸 블록에는 파일 맨 위에서 가져오는 다양한 구성 요소가 포함되어 있습니다. 브라우저에서 이것을 미리 보면 두 개의 빈 블록만 표시됩니다.

차트, 카드 또는 테이블과 같은 Tremor의 사전 구축된 구성 요소로 블록을 채울 수 있습니다. API(REST 또는 GraphQL)에서 데이터를 가져오거나 구성 요소 내부의 개체 배열에 저장할 수 있습니다.

셸 블록에 구성 요소를 추가하려면 <div className=”h-96″/> 줄을 다음으로 바꿉니다.

<Title>Performance</Title>

<Text>Comparison between Sales and Profit</Text>


<AreaChart
  marginTop="mt-4"
  data={data}
  categories={["Sales", "Profit"]}
  dataKey="Month"
  colors={["indigo", "fuchsia"]}
  valueFormatter={valueFormatter}
  height="h-80"
/>

그런 다음 반환 명세서 앞에 다음 배열을 추가합니다 (대시보드의 기본 섹션에 표시되는 데이터임).

// Data to display in the main section const data = [ { Month: "Jan 21", Sales: 2890, Profit: 2400, }, { Month: "Feb 21", Sales: 1890, Profit: 1398, }, //. .. { Month: "Jan 22", Sales: 3890, Profit: 2980, }, ];

const valueFormatter = (number) =>


$ ${Intl.NumberFormat("us").format(number).toString()};

다음으로 valueFormatter 뒤에 파일에 다음 코드를 추가합니다 .

// Data to display in KPI section const categories = [ { title: "Sales", metric: "$ 12,699", percentageValue: 15.9, target: "$ 80,000", }, { title: "Profit", metric: "$ 45,564", percentageValue: 36.5, target: "$ 125,000", }, { title: "Customers", metric: "1,072", percentageValue: 53.6, target: "2,000", }, { title: "Yearly Sales Overview", metric: "$ 201,072", percentageValue: 28.7, target: "$ 700,000", }, ];

개체 의 범주 배열의 경우 개별 카드 구성 요소 에 데이터를 표시하려면 각 개체를 통해 매핑해야 합니다 . 먼저 KPI 섹션에서 카드 구성 요소를 삭제한 후 다음 코드로 바꿉니다.

{categories.map((item) => ( <Card key={item.title}> <Text>{item.title}</Text> <Metric>{item.metric}</Metric> <Flex marginTop="mt-4"> <Text truncate={true} >{`${item.percentageValue}% (${item.metric})`}</Text>

<Text>{item.target}</Text> </Flex>


    <ProgressBar
      percentageValue={item.percentageValue}
      marginTop="mt-2"
    />
  </Card>
))}

그리고 그게 다야. Tremor로 첫 번째 대시보드를 만들었습니다. npm start 를 실행하여 대시보드를 봅니다. 위의 스크린샷과 유사해야 합니다.

떨림 구성 요소 사용자 지정

Tremor는 소품을 사용하여 사용자 정의할 수 있습니다. 사용자 지정하려는 구성 요소의 설명서를 검토하고 기본값과 함께 포함된 모든 속성을 확인해야 합니다.

예를 들어 <LineChart />가 있는 경우 showXAxis={false} prop을 전달하여 x축을 숨기거나 height={h-40} 을 사용하여 높이를 변경할 수 있습니다 . 크기 조정, 간격, 색상 및 나머지와 같이 Tailwind CSS에 있는 값을 선언하는 소품의 경우 Tailwind 유틸리티 클래스를 사용해야 합니다.

복잡한 React 대시보드를 쉽게 구축

Tremor와 같은 구성 요소 라이브러리 덕분에 UI의 모든 부분을 처음부터 빌드할 필요가 없습니다. Tremor와 같은 라이브러리를 사용하면 복잡한 반응형 UI를 만드는 데 드는 시간과 골칫거리를 모두 줄일 수 있습니다.