Next.js에서 데이터 시각화 기술 소개

18 Oct 2023

nextjs

Next.js는 React 기반의 서버 사이드 렌더링 프레임워크로, 다양한 기능을 지원하여 웹 개발자들이 더욱 효율적으로 웹 애플리케이션을 개발할 수 있습니다. 데이터 시각화는 웹 애플리케이션에서 매우 중요한 요소이며, Next.js에서도 다양한 데이터 시각화 기술을 활용할 수 있습니다.

1. Chart.js

Chart.js는 HTML5 캔버스를 이용하여 다양한 종류의 그래프와 차트를 생성할 수 있는 JavaScript 라이브러리입니다. Next.js 프로젝트에서도 Chart.js를 쉽게 사용할 수 있습니다.

예를 들어, 다음 코드는 Next.js에서 Chart.js를 사용하여 막대 그래프를 생성하는 예시입니다.

import { Bar } from 'react-chartjs-2';

const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1,
    },
  ],
};

const ChartComponent = () => (
  <Bar data={data} />
);

2. D3.js

D3.js는 데이터 기반 문서 조작을 위한 JavaScript 라이브러리로, 다양한 데이터 시각화를 지원합니다. Next.js에서도 D3.js를 사용하여 강력한 데이터 시각화를 구현할 수 있습니다.

다음은 D3.js를 활용한 간단한 예제입니다. 이 예제는 Next.js 프로젝트에서 D3.js와 SVG를 사용하여 원 그래프를 그리는 방법을 보여줍니다.

import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';

const PieChart = () => {
  const svgRef = useRef();

  useEffect(() => {
    const data = [10, 20, 30, 40, 50];
    const width = 300;
    const height = 300;

    const svg = d3.select(svgRef.current)
                .attr("width", width)
                .attr("height", height);

    const pie = d3.pie()(data);
    const arc = d3.arc()
                    .innerRadius(0)
                    .outerRadius(width / 2);

    svg.selectAll("path")
       .data(pie)
       .enter()
       .append("path")
       .attr("d", arc)
       .attr("fill", (d, i) => `rgb(${i * 50}, ${i * 50}, ${i * 20})`);
  }, []);

  return (
    <svg ref={svgRef}></svg>
  );
};

위 코드에서는 D3.js의 pie 함수를 사용하여 데이터를 기반으로 파이 차트의 각 부분을 계산합니다. 그리고 arc 함수를 사용하여 각 부분을 그립니다. 그리고 그려진 각 부분에 색상을 적용합니다.

위의 예제는 D3.js의 기능을 간단하게 소개한 것으로, D3.js는 훨씬 더 다양한 데이터 시각화 기능과 기법을 제공합니다.

결론

Next.js는 데이터 시각화를 위한 다양한 기술들을 지원하고 있습니다. Chart.js와 D3.js는 대표적인 데이터 시각화 라이브러리로서, Next.js와 함께 사용하면 웹 애플리케이션 내에서 보다 직관적이고 효과적인 시각화를 구현할 수 있습니다.

#next.js #chart.js #d3.js