리액트에서 zxing/library를 활용하여 qrcode, barcode를 읽을 경우 예제코드

import { useEffect, useRef, useState } from 'react';
import { BrowserMultiFormatReader, BarcodeFormat, DecodeHintType } from '@zxing/library';

const Reader = () => {
const [localStream, setLocalStream] = useState<MediaStream>();
const Camera = useRef<HTMLVideoElement>(null);
const hints = new Map();
const formats = [BarcodeFormat.QR_CODE, BarcodeFormat.DATA_MATRIX, BarcodeFormat.CODE_128, BarcodeFormat.CODABAR, BarcodeFormat.EAN_13, BarcodeFormat.EAN_8, BarcodeFormat.CODE_39, BarcodeFormat.CODE_93];
hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);
const Scan = new BrowserMultiFormatReader(hints, 500);

useEffect(() => {
 navigator.mediaDevices.getUserMedia({
   video: { facingMode: "user" }, //전면
   // video: { facingMode: { exact: "environment" } }, //후면
 })
   .then(stream => {
     console.log(stream);
     setLocalStream(stream);
   })
 return () => {
   Stop();
 }
}, []);
useEffect(() => {
 if (!Camera.current)
   return;
 if (localStream && Camera.current) {
   Scanning();
 }
 return () => {
   Stop();
 }
}, [localStream]);
const req = useRef<any>();
const Scanning = async () => {
 // const t = await Scan.decodeOnce();
 console.log('scan');
 if (localStream && Camera.current) {
   try {
     const data = await Scan.decodeFromStream(localStream, Camera.current, (data, err) => {
       if (data) {
         setText(data.getText());
         // Scan.stopContinuousDecode();
       } else {
         setText("");
       }
     });
   } catch (error) {
     console.log(error);
   }
 }

}
const Stop = () => {
 if (localStream) {
   const vidTrack = localStream.getVideoTracks();
   vidTrack.forEach(track => {
     localStream.removeTrack(track);
   });
 }
}
const [text, setText] = useState('')
return (
 <div>
   <video
     ref={Camera}
     id="video"
   />
   <span>{text}</span>
 </div>
);
};
export default Reader;

리액트에서 qrcode 및 바코드 리더를 활용하려고 보면 둘 중 하나만 되는 경우가 많다.
zxing는 둘 다 지원하는데, 현재 글쓴날짜 기준으로는 데모코드가 전혀 동작하지 않고,
구글링 해봐도 다 구형버전 예제코드라 동작이 되지 않는다.
결국 다소의 노가다 끝에 최신 버전에 맞는 코드를 작성할 수 있었고, 혹여나 삽질할 사람들을 위해 올려놓는다.