실제 차트 라이브러리 통합 방법들

D3.js, Chart.js를 React와 VanillaWrapper에서 사용하는 다양한 방법

React 방식 (npm install)

React + D3.js (npm install)

실제: import * as d3 from 'd3'; 필요

설치: npm install d3 @types/d3
특징: React 생명주기와 완전 통합

React + Chart.js (실제 라이브러리)

라인 차트

기본 바 차트 (개별 색상)

단일 색상 바 차트

무지개 색상 바 차트

파스텔 톤 바 차트

도넛 차트

실제 Chart.js 라이브러리 사용 중

설치: npm install chart.js react-chartjs-2
특징: React 래퍼 컴포넌트 제공

React 방식 코드 예시

// package.json
{
  "dependencies": {
    "d3": "^7.8.5",
    "@types/d3": "^7.4.0",
    "chart.js": "^4.4.0",
    "react-chartjs-2": "^5.2.0"
  }
}

// React D3 컴포넌트
import * as d3 from 'd3';

const D3Chart = ({ data }) => {
  const svgRef = useRef();
  
  useEffect(() => {
    const svg = d3.select(svgRef.current);
    // D3 차트 로직
    svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('width', d => d.value * 10)
      .attr('height', 20);
  }, [data]);

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

// React Chart.js 컴포넌트
import { Line } from 'react-chartjs-2';

const ChartJSComponent = ({ data }) => {
  return <Line data={data} options={options} />;
};

VanillaWrapper 방식들

장점: 타입 안전성, 번들러 최적화
단점: 여전히 npm install 필요

장점: npm install 불필요, 동적 로드
단점: 네트워크 의존, 타입 안전성 부족

장점: 기존 코드 재사용, 마이그레이션 용이
사용 예: jQuery 플러그인, 기존 Vanilla JS 차트

VanillaWrapper 방식 코드 예시

// 방법 1: npm install + VanillaWrapper
import * as d3 from 'd3';

const d3Initiator = (element: HTMLDivElement) => {
  const svg = d3.select(element).append('svg');
  svg.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr('r', 5);
    
  return () => svg.remove(); // cleanup
};

// 방법 2: CDN + VanillaWrapper
const cdnInitiator = (element: HTMLDivElement) => {
  const script = document.createElement('script');
  script.src = 'https://d3js.org/d3.v7.min.js';
  script.onload = () => {
    // @ts-ignore
    const svg = d3.select(element).append('svg');
    // 차트 로직
  };
  document.head.appendChild(script);
  
  return () => {
    // 스크립트 정리
    document.head.removeChild(script);
  };
};

// 방법 3: 레거시 라이브러리 통합
const legacyInitiator = (element: HTMLDivElement) => {
  // 기존 jQuery 플러그인이나 Vanilla JS 라이브러리 사용
  window.legacyChartLib.create(element, options);
  
  return () => {
    window.legacyChartLib.destroy(element);
  };
};

// 사용법
<VanillaWrapper initiator={d3Initiator} />
<VanillaWrapper initiator={cdnInitiator} />
<VanillaWrapper initiator={legacyInitiator} />

어떤 방식을 선택할까?

방식	npm install	타입 안전성	번들 크기	추천 상황
React + npm	✅ 필요	✅ 완벽	🔶 보통	일반적인 프로젝트
VanillaWrapper + npm	✅ 필요	✅ 완벽	🔶 보통	복잡한 차트, 세밀한 제어
VanillaWrapper + CDN	❌ 불필요	❌ 부족	✅ 작음	프로토타입, 간단한 차트
레거시 통합	🔶 상황따라	❌ 부족	🔶 상황따라	기존 코드 재사용, 마이그레이션

✅ React + npm 추천

• 새로운 프로젝트
• 팀 개발 환경
• 타입 안전성 중요
• 장기 유지보수

🔧 VanillaWrapper 추천

• 기존 Vanilla JS 차트 재사용
• 매우 복잡한 커스터마이징
• React 래퍼가 없는 라이브러리
• 성능이 극도로 중요한 경우