1. 필요한 라이브러리

1. dom-to-image
2. file-saver

2. 적용 예

import React from 'react';
import domtoimage from 'dom-to-image';
import { saveAs } from 'file-saver';

const Dom = () => {
  //dom-to-image 및 file-saver를 사용한 함수
    const onDownloadBtn = ()=>{
        domtoimage
        .toBlob(document.querySelector("#downloadImg"))
        .then((blob)=>{
            const saveConfirm = window.confirm("이미지를 저장하시겠습니까?")
            if(saveConfirm === true){
            saveAs(blob, 'download.png');
            }
        })
    }
  return (
    <div>
        <div id='downloadImg'>
            <h1>다운로드 하고싶은 영역의</h1>
            <p>자식 요소들까지 함께 이미지화되어 저장됨</p>
        </div>
        <button onClick={onDownloadBtn}>저장하기</button>
    </div>
  )
}

export default Dom

3. 기타

신기하게도 리액트에서 사용하였는데 useref를 사용하지 않고 querySelector를 사용하여 호출했다.