Next.js | Fabric.js 설치, import, canvas 생성 (Typescript)

Fabric 은 강력한 HTML5 Canvas 라이브러리로
단순히 그림만 그리는 것이 아니라 그려진 개체를 객체로 관리할 수 있다
그림을 움직이거나, 돌리거나 확대/축소 등의 동작을 할 수 있게 지원해준다

설치

npm install fabric
npm istall @types/fabric -D

import

Fabric 라이브러리는 next.js v5 에서 작성되었기 때문에

import {fabric} from 'fabric'; // v5
import * as fabric from 'fabric'; // v6 로 import 

next.js v6 부터는 srr 이 기본이기 때문에 기존 방식으로 불러올 수 없다

Trying to initialize a canvas that has already been initialized. Did you forget to dispose the canvas

canvas 종료 문구가 없어서 발생하는 에러

"use client";
import React, {
  useLayoutEffect,
  useRef,
  useState,
} from "react";
import * as fabric from "fabric";

const Page = () => {
  const [canvas, setCanvas] = useState<fabric.Canvas | null>();
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const layoutRef = useRef<HTMLDivElement>(null);


  useLayoutEffect(() => {
    if (!layoutRef.current) return;
    const { width, height } = layoutRef.current.getBoundingClientRect();
    // canvas 생성 시 number 타입의 px 을 받고 있기 때문에 감싸고 있는 layoutRef div 의 크기를 사용할 예정
    const newCanvas = new fabric.Canvas("canvas", {
      width,
      height,
    });
    setCanvas(newCanvas);

    return () => {
      newCanvas.dispose().then();
      // 클리어 함수에 종료 문구를 넣어줘야 위 에러가 발생하지 않는다
    };
  }, []);

  return (
      <div className={"min-h-[24rem] w-full"} ref={layoutRef}>
        <canvas id="canvas" ref={canvasRef} className={"bg-white"} />
      </div>
  );
};

export default Page;