본문 바로가기

JavaScript

React에서 HTML5 Canvas를 활용한 인터랙티브 그래픽 그리기 React에서 HTML5 Canvas를 사용하면 복잡한 그래픽과 인터랙티브 요소를 효과적으로 구현할 수 있습니다. 이번 글에서는 React 컴포넌트 내에서 Canvas를 설정하고, 마우스 이벤트를 활용해 그래픽을 동적으로 그리는 방법을 소개합니다.1. Canvas 기본 설정먼저 React 컴포넌트 내에 요소를 생성하고, useRef 훅으로 접근합니다.import React, { useRef, useEffect } from 'react';function InteractiveCanvas() { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContex.. 더보기
React에서 컴포넌트 성능 측정 및 분석하기 성능 최적화는 느낌이 아니라 데이터로 판단해야 합니다. 이 글에서는 React 애플리케이션에서 컴포넌트 렌더링 성능을 측정하고, 병목을 찾아내어 개선 방향을 정하는 실무 중심 방법을 정리합니다.1. 무엇을, 왜 측정할까요?React 앱에서 체감 성능 저하는 주로 불필요한 재렌더, 무거운 계산, 긴 커밋 시간, 긴 작업(Long Task)으로 발생합니다. 측정의 목표는 다음을 파악하는 것입니다.어떤 사용자 동작이 느린가 (검색, 필터, 탭 전환 등)어떤 컴포넌트가 느린가 (실제 렌더 시간, 커밋 시간)왜 렌더됐는가 (props, state, context 변경 원인)2. React DevTools Profiler 기본기React DevTools의 Profiler 탭으로 렌더링 비용을 기록합니다.Record.. 더보기

티스토리툴바