React Chart Library Victory를 써보자

이 글은 Victory 공식 사이트의 Getting Started를 통해서 간단한 실습을 해본 예제 입니다.
좀 더 자세한 내용을 확인해 보시려면 아래의 링크를 참고해 주세요.
https://formidable.com/open-source/victory/docs/victory-voronoi

일반적으로 데이터 시각화 작업을 위해서는 D3를 사용하는 것이 일반적이지만 D3를 사용하기 위해서 공부하고 지식을 습득하는 그렇게 진입 장벽이 쉽지 않습니다. 또한, D3는 React와 함께 작동하도록 설계가 되어있지 않기 때문에 React에서 데이터 시각화 작업을 하는 데 큰 고충을 겪을 수 있습니다. 반면에 Victory는 React와 잘 호환되도록 설계되었으며 사용법 또한 간단합니다. 그리고 익숙해진다면 다양한 옵션을 통해서 원하는 이상적인 데이터 시각화를 할 수 있겠죠. 물론 데이터 시각화와 관련해서 더 다양하고 확장성 있는 작업을 하고 싶다면 D3를 공부하는 게 좋겠지만 처음 사용하는 사용자가 쉽게 접근해서 사용할 수 있는 Victory를 접해보는 것 역시 좋은 경험이라고 생각합니다.

Getting Started

Victory의 공식 홈페이지에서 해당 라이브러리의 기본적인 예제를 보여주는 Getting Started에서는 함수 컴포넌트로 설명되어 있습니다. 물론 클래스 기반의 컴포넌트도 다양한 예제가 있어서 React를 사용하는 분이라면 어렵지 않게 사용할 수 있을 것입니다.

install Victory

시작에 앞서 React 환경에 victory를 설치해 주도록 하겠습니다.

npm install victory
yarn add victory

Data Setting

설치가 완료됐다면 저희가 시각화할 데이터를 설정해 주도록 하겠습니다. 처음으로 Chart.jsx 파일을 생성해 준 후 저는 예제로 사람들이 휴양지로 어디를 선호하는지 보여주는 그래프를 만들어 보도록 하겠습니다. 배열의 요소로 객체 형태를 가지며 vacation Spot 는 x축 vote는 y축의 기준이 될 것입니다.

const data = [
  { vacationSpot: "산", vote: 200 },
  { vacationSpot: "바다", vote: 342 },
  { vacationSpot: "호텔", vote: 130 },
  { vacationSpot: "계곡", vote: 91 },
  { vacationSpot: "호수", vote: 76 },
  { vacationSpot: "갯벌", vote: 8 },
];

ChartBar 구성

데이터를 지정해 줬다면 간단하게 ChartBar를 그리는 작업을 해보도록 하겠습니다. Victory의 ChartBar Component를 import한 후 컴포넌트에 data와 x 그리고 y의 기준이 되는 key를 지정해 줍니다.

import React from "react";
import { VictoryBar } from "victory";

const data = [
  { vacationSpot: "산", vote: 200 },
  { vacationSpot: "바다", vote: 342 },
  { vacationSpot: "호텔", vote: 130 },
  { vacationSpot: "계곡", vote: 91 },
  { vacationSpot: "호수", vote: 76 },
  { vacationSpot: "갯벌", vote: 8 },
];

const Chart = () => {
  return (
    <div>
      <VictoryBar data={data} x="vacationSpot" y="vote" />
    </div>
  );
};

export default Chart;

위와 같이 Component를 구성했다면 ChartBar의 기본적인 형태가 생성됩니다. 하지만 저희가 익히 알고 있는 Chart라고 하기에는 부족한 부분이 있죠 Victory의 다른 Component를 활용해서 형태를 잡아 주도록 하겠습니다.

VictoryChart 적용

VictoryChart는 Chart의 각각의 축에 대한 정보를 Chart의 형태로 보여주는 역할을 합니다.import한 후 VictoryBar의 부모 요소로 감싸줘 보도록 하겠습니다.

// domainPadding는 Bar간의 간극을 설정해 줄 수 있습니다.

      <VictoryChart domainPadding={20}>
        <VictoryBar data={data} x="vacationSpot" y="vote" />
      </VictoryChart>

이제 저희가 익히 알고 있는 Chart의 모습이 만들어 졌습니다.

후기

Victory Getting Started의 일부를 사용해서 Chart를 그려 봤지만, 상당히 다양한 형태의 그래프와 Option을 통해서 사용자가 원하는 모습으로 변화를 줄 수 있는 다양한 기능들이 잘 설명되어 있습니다. 생각보다 엄청나게 간단한 과정으로 Chart가 쉽게 만들어지는 것을 보고 진입 장벽이 정말 낮다는 생각을 했습니다. 또한, React를 기반으로 만들어진 만큼 React에서 사용하기가 엄청나게 쉬워 보입니다.