자바스크립트와 React.js로 웹 기반 그림판 애플리케이션 만들기

09 Nov 2023

reactjs

이번 포스트에서는 자바스크립트와 React.js를 사용하여 실시간으로 작동하는 웹 기반 그림판 애플리케이션을 만들어보겠습니다. 이 앱은 사용자가 마우스를 움직여 그림을 그릴 수 있는 기능을 제공하며, 다양한 도구와 색상을 선택할 수 있습니다.

1. 환경 설정

먼저, Node.js와 npm을 설치해야 합니다. 이를 통해 React.js 앱을 개발할 수 있습니다. 설치가 완료되면 새로운 React.js 프로젝트를 생성합니다.

npx create-react-app drawing-app
cd drawing-app
npm start

2. 프로젝트 구조

프로젝트를 생성한 후에는 주요 파일들이 포함된 폴더 구조를 살펴봅니다.

drawing-app/
  - src/
    - App.js
    - App.css
    - index.js
    - index.css

src/App.js: 주요 앱 컴포넌트
src/App.css: 앱 컴포넌트에 관련된 스타일
src/index.js: 앱 진입점
src/index.css: 전역 스타일

3. 그림판 기능 구현

이제 그림판의 핵심 기능을 구현해 보겠습니다. 먼저, App.js 파일을 열고 다음과 같이 코드를 작성합니다.

import React, { useState, useRef, useEffect } from 'react';
import './App.css';

const App = () => {
  const canvasRef = useRef(null);
  const [isDrawing, setIsDrawing] = useState(false);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    context.lineWidth = 2;
    context.strokeStyle = 'black';
  }, []);

  const startDrawing = ({ nativeEvent }) => {
    const { offsetX, offsetY } = nativeEvent;
    context.beginPath();
    context.moveTo(offsetX, offsetY);
    setIsDrawing(true);
  };

  const draw = ({ nativeEvent }) => {
    if (!isDrawing) return;
    const { offsetX, offsetY } = nativeEvent;
    context.lineTo(offsetX, offsetY);
    context.stroke();
  };

  const finishDrawing = () => {
    context.closePath();
    setIsDrawing(false);
  };

  return (
    <div className="app">
      <canvas
        className="canvas"
        ref={canvasRef}
        onMouseDown={startDrawing}
        onMouseMove={draw}
        onMouseUp={finishDrawing}
        onMouseLeave={finishDrawing}
      />
    </div>
  );
};

export default App;

위 코드에서는 App 컴포넌트 내부에서 canvas 엘리먼트와 관련된 함수들을 정의하고 있습니다. canvasRef는 canvas 엘리먼트를 참조하고, isDrawing 상태는 그림 그리기 동작 여부를 나타냅니다. useEffect 훅을 사용하여 그림판의 초기 설정을 수행하고, startDrawing, draw, finishDrawing 함수를 통해 그리기 동작을 처리합니다.

4. 마무리

이제 기본적인 그림판 애플리케이션이 완성되었습니다. 여기에 추가적으로 도구 선택, 색상 선택, 그림 지우기 등의 기능을 구현할 수 있습니다. React.js와 자바스크립트를 사용하면 사용자와 상호작용하는 웹 기반 그림판을 쉽게 만들 수 있습니다.

이 튜토리얼을 마치겠습니다. 더 많은 React.js 관련 정보는 #React, #웹개발 태그를 참고하시기 바랍니다.

목차

1. 환경 설정

2. 프로젝트 구조

3. 그림판 기능 구현

4. 마무리