requestAnimationFrame 썸네일형 리스트형 React로 차트 애니메이션 직접 구현하기 라이브러리 없이 React로 차트 애니메이션을 직접 구현하면 번들 크기를 줄이고, 원하는 타이밍과 인터랙션을 세밀하게 제어할 수 있습니다. 이 글은 SVG와 Canvas를 사용해 requestAnimationFrame 기반으로 라인/바 차트 애니메이션을 구현하는 실무적인 패턴을 정리했습니다.1. 목표와 접근목표는 다음과 같습니다. (1) 첫 렌더에서 라인 차트를 "그려지는" 애니메이션, (2) 데이터가 바뀔 때 부드러운 보간 애니메이션, (3) 많은 요소에서도 버벅임이 적은 패턴입니다. 핵심은 시간 기반 애니메이션과 보간(easing/lerp), 그리고 렌더 비용을 최소화하는 구조입니다.2. SVG vs Canvas 선택 기준- SVG: DOM 기반으로 접근성/스타일이 쉬워서 수십~수백 요소의 차트에 적.. 더보기 React에서 WebGL 직접 구현하여 인터랙티브 그래픽 만들기 React에서 WebGL을 직접 다루면 의존성 없이 가볍고 빠른 인터랙티브 그래픽을 만들 수 있습니다. 핵심은 React 렌더 트리를 최대한 건드리지 않고, WebGL 상태와 애니메이션 루프를 useRef와 useEffect로 제어하는 것입니다.1. 아키텍처 개요React는 캔버스 DOM만 관리하고, 실제 렌더링은 WebGL이 담당합니다. React state는 최소화하고, WebGL 컨텍스트, 셰이더, 버퍼, requestAnimationFrame 루프는 ref에 보관합니다. 리사이즈, 마우스 이벤트는 캔버스에 직접 바인딩합니다.2. 최소 예제: 풀스크린 트라이앵글 + 마우스 인터랙션import { useEffect, useRef } from 'react';function InteractiveGL() .. 더보기 이전 1 다음