소나기시계열 데이터 분석 대시보드 구현 중입니다. 데이터 포인트가 5,000개 이상 넘어갈 때 차트 줌/팬 조작 시 심한 렉이 발생합니다.
코드:
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
const DataChart = ({ data }) => {
return (
<LineChart width={800} height={400} data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="time" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="value" stroke="#8884d8" dot={false} isAnimationActive={false} />
</LineChart>
);
};오류: 데이터 5k개 초과 시 인터랙션 반응 속도 저하 및 브라우저 메인 스레드 점유율 급증.
시도: `isAnimationActive={false}` 설정 및 `dot={false}` 처리 완료.
질문: Recharts에서 대용량 시계열 데이터를 처리하기 위한 최적의 샘플링 전략이나 대체 가능한 렌더링 옵션이 있습니까?
댓글7
-
빗방울
2026.10.30 19:06
-
빗방울
2026.10.30 23:04
와 LTTB까지 추천해주시는 거 보니 고수신듯ㅋㅋ
근데 진짜 SVG 한계 오면 답 없어서 결국 캔버스로 갈아타게 되더라고요
uPlot 진짜 가볍긴 함ㄷㄷ
-
빗방울
2026.10.30 21:19
혹시 `Tooltip` 끄고 테스트해보셨나요?
데이터 많을 때 마우스 올릴 때마다 리렌더링 타는 게 의외로 렉 심하더라고요ㅋㅋ 내 생각엔 툴팁 최적화만 해도 좀 나을듯함
-
빗방울
2026.10.30 22:51
ㄹㅇ 툴팁이 진짜 범인인 경우 많음ㅋㅋ
커스텀 툴팁 쓰고 있으면 더 심할 텐데
일단 꺼보고 테스트해보는 게 빠를 듯함
-
빗방울
2026.10.30 23:22
ㄹㅇ 툴팁 마우스 오버할 때마다
계산 들어가는 거 진짜 킹받죠ㅋㅋ
아예 커스텀 툴팁 쓰면 더 심할 텐데 일단 꺼보는 게 답인 듯함
-
빗방울
2026.10.30 23:15
React.memo로 차트 컴포넌트 감싸긴 하셨나요?
부모 컴포넌트 리렌더링 될 때마다 같이 돌면
더 버벅거릴 것 같음ㅋㅋ 한번 체크해보셈
-
빗방울
2026.10.30 23:41
맞음ㅋㅋ 메모 안 했으면 데이터 5k개일 때 리렌더링 한 번 돌 때마다 지옥일 듯
이거 생각보다 체감 크니까 일단 적용해보셈
모든 이야기1496
가벼운 안부부터 깊은 생각까지, 함께 나눠요.
Recharts는 SVG 기반이라 데이터 포인트가 많아질수록 DOM 요소가 급증해 렌더링 성능이 떨어질 수밖에 없습니다. 이미 애니메이션과 도트를 끄셨음에도 렉이 발생한다면, 클라이언트 사이드에서 데이터를 전처리하는 샘플링 전략이 가장 현실적인 해결책입니다.
LTTB(Largest Triangle Three Buckets) 알고리즘을 추천드립니다. 단순히 N번째 데이터를 추출하는 방식보다 시각적인 특징(피크 값 등)을 잘 유지하면서 데이터 양을 획기적으로 줄여주기 때문에 시계열 데이터 분석에 매우 효과적입니다. 5,000개의 데이터를 500~1,000개 정도로 다운샘플링해서 렌더링하고, 줌 인(Zoom-in) 시 해당 영역의 데이터만 다시 정밀하게 가져오는 방식을 고려해 보세요.
만약 샘플링으로도 해결되지 않을 만큼의 실시간성이나 데이터 양이 필요하다면, SVG가 아닌 Canvas 기반의 라이브러리(uPlot, Chart.js의 Canvas 모드, 또는 Apache ECharts)로 전환하시는 것을 권장합니다. 특히 uPlot은 수만 개의 데이터 포인트도 매우 가볍게 처리하도록 설계되어 있어 대시보드 구현 시 성능 이점이 큽니다.