React로 그림판 만들기2 : 리셋&저장

이전 글에 이어서 작업물 리셋&저장 기능을 구현해보자. 해당 기능은 매우 간단한 코드 작성으로 구현 가능하다. 노마드 코더 바닐라JS로 그림 앱 만들기 강의와 딱히 다를 것 없을지도?

props 이용해 값 전달하기

그림을 그릴 수 있는 기능은 App.jsx에, 다른 기능들은 MenuBar.jsx에 코드를 작성했다. 따라서 App.jsx에 canvas 정보들을 MenuBar.jsx에 props를 사용해 전달했다.

• App.jsx

// ~~~ 생략 ~~~
import MenuBar from "./components/MenuBar";

return (
	{/* ~~~ 생략 ~~~ */}
	<MenuBar 
    	getCtx={getCtx}
        getCanvas={getCanvas}
    />
);

• MenuBar.jsx

export default function MenuBar({ getCtx, getCanvas }) {
	return ();
}

리셋 기능 구현하기

리셋 기능은 clearRect() 메서드를 사용하면 쉽게 작업물을 초기화할 수 있다. <RestartAltIcon />은 mui 아이콘이니 신경쓰지말자.

export default function MenuBar({ getCtx, getCanvas }) {

	const onReset = () => {
    	getCtx.clearRect(0, 0, getCanvas.width, getCanvas.height);
  	}
  
 	return (
        <li onClick={onReset}>
        	<RestartAltIcon className="icons" />
      	</li>
  	);
}

다운로드 기능 구현하기

이미지 다운로드 기능은 노마드 코더 바닐라JS로 그림 앱 만들기 강의와 다를 것이 없다. 뭔가 React스러운(?) 코드를 원했으나, 아직 괜찮은 코드를 찾지 못했다ㅠ. "으... React 저렇게 하는 거 아닌데..." 하시는 분은 제발 댓글로 알려줘잉...

export default function MenuBar({ getCtx, getCanvas }) {

    const onSave = () => {
      const imageURL = getCanvas.toDataURL();
      const downloadImage = document.createElement("a");
      downloadImage.href = imageURL;
      downloadImage.download = "paint_image";
      downloadImage.click();
    }
  
 	return (
        <li onClick={onSave}>
        	<SaveIcon className="icons" />
      	</li>
  	);
}

아직 디자인을 어떻게 할 지 몰라서 대충 배치했는데, 나에게는 아직 디자인이 제일 어려운 것 같다. 그쪽으로 감각이 없나? ㅠ. 다음은 색상선택, 지우개 기능을 하려고 하는데 노마드 코더 바닐라JS로 그림 앱 만들기에 없던 지우개, 이미지&텍스트 추가 기능이 새로 업데이트 되었다.(노마드로부터 돈 안 받았다.) 해당 강의를 다시 보면서 React로 바꿔보는 작업을 해봐야겠다.

끝.