쓰기 귀찮지만 나처럼 헤맬 사람들을 위해 ...
react로 그림판 앱 만들기 위해서 깔면 좋은 패키지를 발견해서 적어보려고 한다
나처럼 this.state 이렇게 안쓰는 사람들은 보면 좋을 듯?
그럼 시작!
https://www.npmjs.com/package/react-canvas-draw
아주 친절하다 따라하면 된다
npm install react-canvas-draw --legacy-peer-deps
이렇게 설치해주자 ... 이래도 안되면 모름
데모 : https://embiem.github.io/react-canvas-draw/
깃허브 : https://github.com/embiem/react-canvas-draw/blob/develop/demo/src/index.js
이거 보면서 참고하면 좋다
사실상 <CanvasDraw />
만 가져오면 알아서 그림그리는 영역도 정해지고 굵기도 바꿀 수 있는데
저장과 불러오기가 어렵다 나는 이거 위주로 설명하겠다
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;
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
를 생성해서 이용한다 정도만 알아도 충분히 응용 가능할 듯 ?
아님 말고 ...
졸리니까 자야겠다 ~~ 그럼 안녕 ~~