React로 대화형 차트 성능 향상하기

개요

대량 데이터 시각화는 사용자 경험에 큰 영향을 준다. React 환경에서 차트가 느려지면 인터랙션이 끊기고 탐색이 불편해진다. 본문에서는 초보자도 이해하기 쉬운 원리와 실무 중심의 최적화 기법을 정리한다. 핵심은 렌더 횟수 감소, 연산 분산, 그리고 렌더 방식 선택이다.

성능 병목 이해하기

렌더와 재렌더의 차이

React는 상태 변화에 따라 컴포넌트를 재렌더한다. 차트는 DOM 업데이트나 캔버스 픽셀 업데이트 비용이 크다. 불필요한 상태 변경이 잦으면 렌더가 과도하게 발생해 성능 저하로 이어진다.

데이터 처리와 시각화 비용

원시 데이터의 집계, 스무딩, 포인트 계산 등은 CPU 작업이다. 브라우저 메인 스레드에서 이 작업을 수행하면 프레임 드롭이 발생한다. 따라서 렌더링 전 데이터 축소나 워커 분리를 고려해야 한다.

핵심 최적화 전략

1. 데이터 축소(Downsampling)

보이는 픽셀 수보다 많은 포인트를 렌더할 필요는 없다. 예를 들어 1920px 너비의 차트는 초당 수천만 포인트를 모두 표시할 수 없다. 대표값 추출, LTTB(lowess), 또는 샘플링으로 포인트 수를 줄이면 렌더 비용을 크게 낮출 수 있다.

2. 가상화와 레이지 로딩

전체 시리즈를 한 번에 보여주지 않고, 뷰포트 내 데이터만 렌더링한다. 스크롤이나 줌을 기준으로 필요한 구간만 로드하면 초기 렌더 비용이 줄어든다.

3. Web Worker로 연산 분리

대량 데이터 전처리와 집계는 Web Worker로 옮긴다. 메인 스레드는 렌더링과 사용자 이벤트 처리에 집중하고, 워커는 CPU 집약적 작업을 수행한다. React와 워커 간에는 직렬화 오버헤드를 고려해 적절한 메시지 구조를 설계해야 한다.

4. 캔버스 vs SVG 선택

canvas vs svg react chart 선택은 포인트 수와 상호작용 요구사항에 따라 달라진다. 일반적으로 다음 기준을 따른다:

• SVG: DOM 기반으로 스타일링과 접근성이 쉬움. 포인트 수가 적고 요소별 이벤트 처리가 필요할 때 유리.
• Canvas: 픽셀 기반으로 대량 포인트 렌더에 유리. 요소별 이벤트 처리 대신 히트맵 또는 룩업 기법으로 상호작용을 구현.

따라서 대규모 시계열이나 수천~수만 포인트일 경우 canvas를 권장한다. 이 지점에서 "canvas vs svg react chart" 키워드를 고려한 기술 선택이 중요하다.

라이브러리별 고려사항

Highcharts와 React

Highcharts는 강력한 기능을 제공하지만 기본 설정 그대로라면 많은 포인트에서 성능이 떨어질 수 있다. 설정을 통해 데이터 축소, boost 모듈 사용, 그리고 시리즈 단위로 렌더 전략을 조절하면 개선된다. 관련 검색어로 "highcharts react 성능"을 참고하면 모듈별 최적화 옵션을 확인할 수 있다.

경량 라이브러리와 직접 렌더링

Chart.js, uPlot, ECharts 등은 각기 다른 특성을 가진다. uPlot은 대규모 시계열에 특화되어 있으며, ECharts는 canvas 기반에서 강력한 압축 렌더링을 제공한다. 프로젝트 요구에 맞춰 라이브러리를 선택하면 추가 최적화 부담을 줄일 수 있다.

실무 적용 예시

React + Canvas 기반 간단 예시

아래 예시는 캔버스에 대량 데이터를 그릴 때 React 컴포넌트 구조와 워커를 함께 사용하는 최소 예시다.

import React, { useRef, useEffect } from 'react';

function LargeCanvasChart({ data }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 단순 샘플링: 화면 너비에 맞춰 포인트 축소
    const step = Math.max(1, Math.floor(data.length / canvas.width));
    ctx.beginPath();
    for (let i = 0; i < canvas.width; i++) {
      const idx = i * step;
      const y = (1 - data[idx]) * canvas.height;
      if (i === 0) ctx.moveTo(i, y);
      else ctx.lineTo(i, y);
    }
    ctx.stroke();
  }, [data]);

  return <canvas ref={canvasRef} width={800} height={300} />;
}

export default LargeCanvasChart;

위 코드는 간단한 샘플링으로 렌더 부하를 줄인다. 실제 환경에서는 LTTB 같은 알고리즘과 Web Worker 결합을 권장한다.

측정과 반복 개선

성능은 측정 후 개선해야 명확한 효과를 확인할 수 있다. Chrome DevTools의 Performance 탭과 FPS 미터, Lighthouse 등을 사용해 병목을 찾아낸다. 변경마다 벤치마크를 기록해 최적화 방향을 검증한다.

요약

• 렌더 횟수와 데이터 양을 줄이는 것이 최우선이다.
• 대량 데이터는 캔버스 기반 렌더가 유리하다.
• 전처리 작업은 Web Worker로 분리한다.
• 라이브러리 선택과 설정으로 추가 최적화를 적용한다. (highcharts react 성능 관련 옵션 참고)

이러한 원칙을 프로젝트에 적용하면 반응성과 렌더링 속도가 눈에 띄게 개선된다. 처음에는 작은 변경부터 적용하고 측정하면서 확장하는 방식이 실무에 가장 안정적이다.