20210301 13일차 그림판 적용

 

필수 개념 useRef

 

useRef는 우리가 리액트 컴포넌트에서 외부 라이브러리의 인스턴스 또는 DOM 을 특정 값 안에 담을 때 사용합니다.

 

https://velog.io/@edie_ko/React-TypeScript-JavaScript%EC%97%90%EC%84%9C-TypeScript%EB%A1%9C-%EB%B3%80%ED%99%98-%EC%97%90%EB%9F%AC-%EC%84%A0%EB%AC%BC-%EC%84%B8%ED%8A%B8

ref 가 null 일 수도 있는 상황에 해당하여, Generics 를 사용하여 표기했다.

const firstCanvas = useRef<any>(null);

 

추가로 공부해야할 내용(반드시 리뷰 및 내용정리해야 함.)

타입스크립트로 리액트 Hooks 사용하기(useState, useReducer, useRef)

출처: velog.io/@velopert/using-hooks-with-typescript

 

Paint component 코드

 

useRef 를 사용하여 구현했고( 추가적으로 내용정리 필요.)

색 변경 시 hooks 메소드인 usestate 를 이용하여 상태 관리를 한다.

import React, { ReactElement, useRef, useState } from "react";
import styled, { keyframes } from "styled-components";
import CanvasDraw from "react-canvas-draw";

export default function CPaint(): ReactElement {
	const [color, changeColor] = useState("black");
	const firstCanvas = useRef<any>(null);
	const secondCanvas = useRef<any>(null);
	const handleColorClick = (event: any) => {
		const newColor = event.target.style.backgroundColor;
		changeColor(newColor);
	};

	const clear1 = () => {
		firstCanvas.current.clear();
	};
	const undo1 = () => {
		firstCanvas.current.undo();
	};
	const handleSaveClick = () => {
		const data = firstCanvas.current.getSaveData();
		console.log("firstdata", data); // type of data === 'string'
		// secondCanvas.current.loadSaveData(data);
	};
	const clear2 = () => {
		secondCanvas.current.clear();
	};
	const undo2 = () => {
		secondCanvas.current.undo();
	};
	const revise = () => {
		const secondData = secondCanvas.current.getSaveData();
		console.log("SecondData", secondData); // 두번째 캔버스의 모든 데이터.
	};

	return (
		<Main>
			<CanvasDraw
				className="CanvasDraw"
				brushRadius={1}
				brushColor={color}
				catenaryColor="red"
				hideGrid
				ref={firstCanvas}
				style={canvasStyle}
			/>
			{/* <CanvasDraw brushRadius={1} brushColor={color} hideGrid ref={secondCanvas} style={canvasStyle} /> */}
			{/* <PaintColor> */}
			{/* <Paint className="fas fa-brush" /> */}
			<Colors className="colors">
				<Color className="singleColor" onClick={handleColorClick} style={{ backgroundColor: "#2c2c2c" }} />
				<Color className="singleColor" onClick={handleColorClick} style={{ backgroundColor: "white" }} />
				<Color className="singleColor" onClick={handleColorClick} style={{ backgroundColor: "#FF3B30" }} />
				<Color className="singleColor" onClick={handleColorClick} style={{ backgroundColor: "#FF9500" }} />
				<Color className="singleColor" onClick={handleColorClick} style={{ backgroundColor: "#FFCC00" }} />
				<Color className="singleColor" onClick={handleColorClick} style={{ backgroundColor: "#4CD963" }} />
				<Color className="singleColor" onClick={handleColorClick} style={{ backgroundColor: "#5AC8FA" }} />
				<Color className="singleColor" onClick={handleColorClick} style={{ backgroundColor: "#0579FF" }} />
				<Color className="singleColor" onClick={handleColorClick} style={{ backgroundColor: "#5856D6" }} />
			</Colors>
			{/* </PaintColor> */}

			<Buttons>
				<Button onClick={clear1}>새종이</Button>
				<Button onClick={undo1}>마지막지우기</Button>
				<Button onClick={handleSaveClick}>다그렸다버튼</Button>
				{/* <Button onClick={clear2}>newPaper</Button>
				<Button onClick={undo2}>undo</Button>
				<Button onClick={revise}>Save Revision</Button> */}
			</Buttons>
		</Main>
	);
}

스타일 컴포넌트 생략.

 

추가해야할 기능

 

현재 색변경, 그림 지우기, 저장한 내용을 렌더링하는 것까지 구현 및 이해를 했다.

선들이 수많은 점들로 채워져 있는데, 이 모든 좌표 데이터가 스트링 형태로 데이터 베이스에 저장되어야 될 것 같다.

가능한 일인지 좀더 확인이 필요하다.

더하여서, 펜 굵기 변경 및 지우개(굵은) 옵션을 추가해야겠다.

 

 

도움 받은 사이트

react canvas draw

: www.npmjs.com/package/@types/react-canvas-draw, www.npmjs.com/package/react-canvas-draw

노마더코더 그림판 만들기

: www.youtube.com/watch?v=cq-l2zPUVoU&feature=emb_title

타입스크립트로 리액트 Hooks 사용하기(useState, useReducer, useRef)

출처: velog.io/@velopert/using-hooks-with-typescript