• 프로젝트 간 사용했던 2번째 라이브러리이다.
• k-pop 러버가 본인의 최애에 대하여 정보를 기록해 둘 수 있는 사이트가 있으면 좋겠다 싶어 만들었다.
• 공식 홈페이지 : https://github.com/embiem/react-canvas-draw
  도움이 되는 홈페이지 : https://embiem.github.io/react-canvas-draw/
  

리액트 캔버스 특징

• 우선 매우 오래된 라이브러리이라서 react 16, 17을 넘어가면 error를 내뿜는다;
• 그래서 npm i react-canvas-draw --force를 사용했다;
• 그럼 이런 무결성을 깨면서 까지 사용한 이유는 바로 그려진 데이터를 저장이 가능하다는 장점이 있어서였다.
• 현재의 나로선 아직 이 방법을 구현하는 것이 제한되어서 어쩔 수 없이 있는 예전 라이브러리를 울며 겨자먹기로 가져오게되었다.
• 목표가 있다면 나중에 이런 기능을 open source로 만드는 것이다.

예제 코드

<CanvasDraw
  ref={canvasRef}
  saveData={props.drawData[0]?.saveImage}
  canvasWidth={width}
  canvasHeight={height}
  style={{backgroundColor: "#FFC0CB"}}
  hideGrid={true}
  disabled={canvasObj.drawingOn}
  lazyRadius={0}
  brushRadius={+canvasObj.radius}
  brushColor={canvasObj.color}
  catenaryColor={"#0a0302"}
  immediateLoading={true}
  />

• 그냥 vanilla JS로 <canvas> 로 만든다면 ref를 넣어서 해당 객체로 펜의 크기라든지, 펜의 그림자 라든지를 조절할 수 있는데 이 라이브러리 또한 마찬가지이다.

메서드

• 해당 ref의 객체로 3개의 매서드를 사용할 수 있다.

1. canvasRef.current.getSaveData() : 이거때문에 이 라이브러리를 사용한다 펜으로 그린 데이터를 크기, 색, 위치를 string 타입으로 반환한다.
2. canvasRef.current.undo() : 그린 획을 리스트에서 pop하는 함수이다.
3. canvasRef.current.eraseAll() : 그린 획을 모두 지우는 함수이다.

치명적인 단점

• 또 한 가지의 치명적인 단점이 있는데 바로 canvasWidth, canvasHeight prop에 정수밖에 들어가지 않는다는 것이다. 즉, %나 vh 단위를 사용하면 고장난다;;

• 이를 해결하고자 아래와 같이 window 객체가 notnull일 때 작동하는 매서드를 선언하고

const heightFn = () => window ? Math.ceil(window.innerHeight) : 500;
const widthFn = () => window ? Math.ceil(window.innerWidth ) : 500;

• 이를 useEffect를 통하여 컴포넌트가 실행할 때 update되도록 관리해주었다.

useEffect(() => {
  setWidth(widthFn());
  setHeight(heightFn());
}, [])

• 의존성은 state값들이 react에 의해서 확실히 보존받기 때문에 따로 추가하지는 않았다.