React와 D3.js를 결합한 데이터 시각화 기법

React와 D3.js는 각각의 강점을 가진 라이브러리로, 함께 사용하면 강력한 데이터 시각화 솔루션을 만들 수 있습니다.

1. React와 D3.js의 역할 구분

React는 UI 컴포넌트와 상태 관리를 담당하며, D3.js는 복잡한 수학적 계산과 데이터 기반 변환을 처리합니다. React가 DOM을 관리하는 반면 D3는 데이터 시각화에 필요한 계산과 좌표 설정에 집중하도록 역할을 분담하는 것이 핵심입니다.

2. React에서 D3.js 활용하기

실무에서는 D3의 DOM 조작 기능을 최소한으로 사용하고, React의 JSX로 SVG 요소를 렌더링하면서 D3는 스케일, 축, 레이아웃 계산에 집중하게 합니다. 이렇게 하면 React의 선언적 UI 유지와 D3의 강력한 데이터 처리 능력을 모두 살릴 수 있습니다.

3. 간단한 예제: 바 차트 구현

다음은 React와 D3를 결합해 바 차트를 만드는 기본 코드 예제입니다.

import React from 'react';
import * as d3 from 'd3';

const BarChart = ({ data, width, height }) => {
  const margin = { top: 20, right: 30, bottom: 30, left: 40 };

  const x = d3.scaleBand()
    .domain(data.map(d => d.name))
    .range([margin.left, width - margin.right])
    .padding(0.1);

  const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .nice()
    .range([height - margin.bottom, margin.top]);

  return (
    <svg width={width} height={height}>
      {data.map(d => (
        <rect
          key={d.name}
          x={x(d.name)}
          y={y(d.value)}
          height={y(0) - y(d.value)}
          width={x.bandwidth()}
          fill="teal"
        />
      ))}
      <g
        transform={`translate(0,${height - margin.bottom})`}
        fill="none"
        fontSize={10}
        fontFamily="sans-serif"
        textAnchor="middle"
      >
        {data.map(d => (
          <text key={d.name} x={x(d.name) + x.bandwidth() / 2} y={15}>
            {d.name}
          </text>
        ))}
      </g>
      <g
        transform={`translate(${margin.left},0)`}
        fill="none"
        fontSize={10}
        fontFamily="sans-serif"
        textAnchor="end"
      >
        {y.ticks(5).map(tickValue => (
          <g key={tickValue} transform={`translate(0,${y(tickValue)})`}>
            <line x2={-6} stroke="black" />
            <text x={-9} dy="0.32em">{tickValue}</text>
          </g>
        ))}
      </g>
    </svg>
  );
};

export default BarChart;

4. 실무 팁

• React 컴포넌트가 업데이트 될 때마다 D3가 DOM을 직접 조작하지 않도록 주의하세요.
• 데이터 변경에 따라 스케일과 레이아웃을 D3로 계산하고, React는 JSX 렌더링에 집중합니다.
• 복잡한 시각화는 React 훅(예: useEffect)을 활용해 D3 작업을 격리해도 좋습니다.

이처럼 React와 D3.js를 적절히 분리해 사용하면 견고하고 유지 보수가 쉬운 데이터 시각화 컴포넌트를 만들 수 있습니다.