[ReactJS] react-canvas-draw 사용법 / React canvas 활용하기 with Firebase

삐욕이·2023년 2월 9일
0

맥진APP

목록 보기
3/4

쓰기 귀찮지만 나처럼 헤맬 사람들을 위해 ...
react로 그림판 앱 만들기 위해서 깔면 좋은 패키지를 발견해서 적어보려고 한다
나처럼 this.state 이렇게 안쓰는 사람들은 보면 좋을 듯?
그럼 시작!

1. react-canvas-draw 설치하기

https://www.npmjs.com/package/react-canvas-draw
아주 친절하다 따라하면 된다

* 설치 에러가 뜨는 경우)

npm install react-canvas-draw --legacy-peer-deps

이렇게 설치해주자 ... 이래도 안되면 모름

2. react-canvas-draw 사용 예시

데모 : https://embiem.github.io/react-canvas-draw/
깃허브 : https://github.com/embiem/react-canvas-draw/blob/develop/demo/src/index.js

이거 보면서 참고하면 좋다
사실상 <CanvasDraw /> 만 가져오면 알아서 그림그리는 영역도 정해지고 굵기도 바꿀 수 있는데
저장과 불러오기가 어렵다 나는 이거 위주로 설명하겠다

1) 저장하기

ref={(canvasDraw)=>(saveableCanvas = canvasDraw)}가 중요하다

목표: App.js에서 그림을 그리고, Import.js에서 그렸던 모습을 불러오기

import CanvasDraw from "react-canvas-draw";
const App = () => {
let [saveImage, setSaveImage] = useState("");
let [attachment, setAttachment] = useState("");
let saveableCanvas;
const onSubmit = (event) => {
	event.preventdefault();
    saveImage = saveableCanvas.getSaveData(); // edit 시 불러오기 위해
    attachment = saveableCanvas.getDataURL(); // url로 변경
    setAttachment(attachment);
    setSaveImage(saveImage);
    const diaryObj = {
            attachmentUrl: attachment,
            saveImage: saveImage,
        }
    await dbService.collection("diaries").add(diaryObj);
}
	return(
    <form>
       <CanvasDraw 
       ref={(canvasDraw)=>(saveableCanvas = canvasDraw)} 
       saveData={saveImage} 
       />
    </form>
    )
}
export default App;

2) 불러오기

import CanvasDraw from "react-canvas-draw";
const App = () => {
let [newSaveImage, setNewSaveImage] = useState(userObj.saveImage);
let [newAttachment, setNewAttachment] = useState(userObj.attachment);
let saveableCanvas;
const onSubmit = (event) => {
	event.preventdefault();
    newSaveImage = saveableCanvas.getSaveData(); // edit 시 불러오기 위해
    newAttachment = saveableCanvas.getDataURL(); // url로 변경
    setAttachment(newAttachment);
    setSaveImage(newSaveImage);
    await dbService.doc(`diaries/${diaryObj.id}`).update({
  		attachmentUrl: newAttachment,
        saveImage: newSaveImage,
  });
}
	return(
    <form>
       <CanvasDraw 
       ref={(canvasDraw)=>(saveableCanvas = canvasDraw)} 
       saveData={newSaveImage} 
       />
    </form>
    )
}
export default App;

말고 크기를 바꾸거나 하는 건 demo 읽어도 쉬우니까 패스
사실 firebase랑 연동된 모든 코드를 보여주지 않아서 이해가 될 지는 모르겠지만 ...^^
대충 saveableCanvas를 생성해서 이용한다 정도만 알아도 충분히 응용 가능할 듯 ?
아님 말고 ...
졸리니까 자야겠다 ~~ 그럼 안녕 ~~

profile
코딩 삐욕이 삐욕삐욕

0개의 댓글