1. Canvas

canvas : web에서 마우스로 글, 그림을 그릴수 있게 해주는 태그

  -canvas는 html 태그를 이용하므로 useRef로 DOM에 접근

  -getContext() : 캔버스의 드로잉 컨텍스트를 받아오는 메서드

 

page - <Canvas.js>

import React, { useEffect, useRef } from "react";
import "../../css/canvas.css";

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

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d"); //2d 형식의 드로잉 컨텍스트를 받아옴
  }, []);

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

export default Canvas;

 

canvas.css

.canvas canvas {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}