[22.09.07] useRef, 이미지 저장 기능

useRef

• 변수를 관리하거나 DOM 요소에 접근을 할 때 사용하는 React Hooks

1. 변수 관리
   • Ref 안에 값을 저장하면 아무리 변경해도 컴포넌트는 다시 렌더링되지 않는다 → 변수들의 값이 유지됨
   • 불필요한 렌더링을 막을 수 있다
   • 렌더링을 발생시키지 말아야 하는 값을 다룰 때 편리
   • State가 변해서 렌더링이 일어나도 Ref의 값이 유지된다
2. DOM 요소에 접근
   • 예) input 요소를 클릭하지 않고 포커스를 주고 싶을 때 사용
   • document.querySelector()와 유사
   • 태그에 ref속성으로 선언해주면 된다

자바스크립트 이미지 저장 구현

dom-to-image, file-saver 라이브러리를 이용해서 구현하는 방법으로 개발했다

1. 라이브러리 설치

   npm install dom-to-image
   npm install file-saver

2. 기능 구현

   • useRef()를 이용해서 이미지를 저장할 태그를 찝어준다
   • 버튼을 누르면 작동하는 함수 handleDownload()
     • filter : 버튼 태그 제외하고 저장
     • domtoimage.toBlob() 일어날 타겟(image)을 선택 → saveAs() 로 해당 타겟을 ‘card.png’로 저장
       
   • 해당 노드에 마진 넣어주지 말고 한번 더 감싸서 상위 요소에 margin을 적용해야 이미지가 잘리지 않는다

   import React, { useEffect, useRef, useState } from 'react';
   import domtoimage from 'dom-to-image';
   import { saveAs } from 'file-saver';
   
   function Image({ data }) {
   	const imgResult = useRef();
   
   	const handleDownload = () => {
   		const image = imgResult.current;
   		const filter = (image) => {
   			return image.tagName !== 'BUTTON';
   		};
   
   		domtoimage.toBlob(image, { filter: filter }).then((blob) => {
   			saveAs(blob, 'card.png');
   		});
   	};
   
   	return (
   		<>
   			<ImageWrap ref={imgResult}>
   				<ImageSelected src={images[imageIndex]} alt="background" />
   				<Message>{message}</Message>
   				<Bible>{bible}</Bible>
   			</ImageWrap>
   			<WriteMessage>
   				<div>메시지를 입력하세요.</div>
   				<input
   					type="text"
   					id="message"
   					maxLength="200"
   					onChange={handleMessge}
   				/>
   			</WriteMessage>
   			<SubmitButton onClick={handleDownload}>이미지 저장하기</SubmitButton>;
   		</>
   	);
   }
   
   export default Image;
   
   const ImageWrap = styled.div`
   	border: 1px solid red;
   `;
   
   const ImageSelected = styled.img`
   	width: 50%;
   	height: 50%;
   	overflow: hidden;
   `;
   
   const Message = styled.div``;
   
   const Bible = styled.div``;
   
   const WriteMessage = styled.div`
   	border: 1px solid red;
   `;
   
   const SubmitButton = styled.button`
   	border: 1px solid red;
   `;

[React.js] 컴포넌트 저장 기능 구현하기(dom-to-image, FileSaver)