React에서 HTML5 Canvas를 활용한 인터랙티브 그래픽 그리기

React에서 HTML5 Canvas를 사용하면 복잡한 그래픽과 인터랙티브 요소를 효과적으로 구현할 수 있습니다. 이번 글에서는 React 컴포넌트 내에서 Canvas를 설정하고, 마우스 이벤트를 활용해 그래픽을 동적으로 그리는 방법을 소개합니다.

1. Canvas 기본 설정

먼저 React 컴포넌트 내에 <canvas> 요소를 생성하고, useRef 훅으로 접근합니다.

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

function InteractiveCanvas() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    canvas.width = 600;
    canvas.height = 400;
    ctx.fillStyle = '#eee';
    ctx.fillRect(0, 0, canvas.width, canvas.height); // 초기 배경
  }, []);

  return (
    <canvas ref={canvasRef} />
  );
}

export default InteractiveCanvas;

2. 인터랙티브 드로잉 구현

마우스 이벤트를 활용해 사용자가 커서를 드래그하는 부분에 선을 그려보겠습니다.

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

function InteractiveCanvas() {
  const canvasRef = useRef(null);
  const [isDrawing, setIsDrawing] = useState(false);
  const [lastPos, setLastPos] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    canvas.width = 600;
    canvas.height = 400;
    ctx.fillStyle = '#eee';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }, []);

  const handleMouseDown = (e) => {
    const rect = canvasRef.current.getBoundingClientRect();
    setLastPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
    setIsDrawing(true);
  };

  const handleMouseMove = (e) => {
    if (!isDrawing) return;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();
    const currentPos = { x: e.clientX - rect.left, y: e.clientY - rect.top };

    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(lastPos.x, lastPos.y);
    ctx.lineTo(currentPos.x, currentPos.y);
    ctx.stroke();
    setLastPos(currentPos);
  };

  const handleMouseUp = () => {
    setIsDrawing(false);
  };

  return (
    <canvas
      ref={canvasRef}
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseUp}
      style={{ border: '1px solid #ccc' }}
    />
  );
}

export default InteractiveCanvas;

3. 요약

이번 글에서는 React에서 HTML5 Canvas를 쉽게 활용할 수 있도록 기본 세팅과 마우스 이벤트를 이용한 드로잉 기능을 살펴보았습니다. 이를 토대로 도형, 애니메이션, 게임 등 다양한 인터랙티브 그래픽을 확장할 수 있습니다.