본문 바로가기

canvas

React에서 커스텀 렌더러 구현하기 DOM이 아닌 캔버스, WebGL, 터미널, PDF 같은 타깃에 React 컴포넌트를 그대로 쓰고 싶을 때 커스텀 렌더러를 만듭니다. 핵심은 react-reconciler로 Fiber가 생성하는 변경 내역을 우리의 타깃에 적용하는 HostConfig를 구현하는 것입니다. 실무에서 바로 쓸 수 있는 최소 Canvas 렌더러 예제를 통해 개념부터 코드까지 빠르게 정리합니다.1. 커스텀 렌더러가 필요한 순간다음과 같은 경우에 적합합니다. DOM 대신 2D 캔버스나 WebGL에 UI를 그려야 할 때, 게임 UI, 데이터 시각화 캔버스, CLI/TTY, PDF/이미지 출력, 네이티브 브릿지에 React 상태/동기화를 재사용하고자 할 때입니다.2. 핵심 개념 훑기Reconciler는 React 엘리먼트 트리의 변경.. 더보기
React 앱에서 이미지 필터 효과 적용하기 이미지 톤 보정, 흑백, 블러 같은 효과는 UI 완성도를 즉시 끌어올립니다. React에서는 CSS filter로 가볍게 처리하거나, Canvas로 픽셀 단위 조작과 내보내기까지 구현할 수 있습니다. 이 글은 실무에서 바로 붙일 수 있는 최소 예제와 성능/SEO 팁을 제공합니다.1. CSS filter로 즉시 적용하기 (가볍고 빠름)CSS filter는 GPU 가속이 잘 되고, 레이아웃에 영향을 주지 않아 스크롤/애니메이션에 유리합니다. 슬라이더로 밝기, 대비, 채도, 세피아, 블러를 제어하는 기본 예제입니다.import React, { useMemo, useState } from 'react';export default function CssFilterDemo() { const [params, set.. 더보기
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() .. 더보기

티스토리툴바