React zxing 왜안되는거니...

Zxing

현재 개발 중인 로또 프로젝트에서 가장 중요한 기능이 큐알코드 인식이다.
모바일로 구현이 가능해야 했기 때문에 React Native를 공부하던 중, 지금 상황에서 이 방식으로는 무리인거 같아서 api를 찾아봤다. 그러다 zxing, React-qr-reader 가 있는 걸 찾았다. 근데 React-qr-reader 는 관련 정보가 많이 없었고, 오류가 많다는 글을 발견 했고, Zxing 라이브러리를 사용하기로 맘을 먹었다.

1. 라이브러리 예제를 살펴보기.

공식 사이트에 가면 예시들이 있어서 쉽게 사용할 수 있다.
아래는 내가 선택한 코드이다.

import { useState } from "react";
import { useZxing } from "react-zxing";

export const BarcodeScanner = () => {
  const [result, setResult] = useState("");
  const { ref } = useZxing({
    onResult(result) {
      setResult(result.getText());
    },
  });

  return (
    <>
      <video ref={ref} />
      <p>
        <span>Last result:</span>
        <span>{result}</span>
      </p>
    </>
  );
};

대부분 타입스크립트로 구현해놔서 아직 TS를 잘 모르는 나는 어쩔 수 없이 이걸로....

근데 문제점이 생겼다. 저 코드는 24시간 띄워놓는 코드이다.

이런식으로 ㅠㅠ.... 계속나온다...

import { useState } from "react";
import { useZxing } from "react-zxing";

export const BarcodeScanner = () => {
  const [result, setResult] = useState("");
  const [display, setDisplay] = useState(false)
  const { ref } = useZxing({
    onResult(result) {
      setResult(result.getText());
    },
  });

  return (
    <>
    {display && <video ref={ref} />} // 흔히 사용하는 조건부 렌더 문법
      <p>
        <span onClick={()=>{setDisplay(true)}}>Last result:</span>
        <span>{result}</span>
      </p>
    </>
  );
};

결과는 또 실패.... 흠 문제점 이 뭐지...
jsx문법 잘못인 줄 알고 {display && <div><video ref={ref} /><div>}
이렇게 바꿔줘도 안된다... 하으...

또 다른 예시

import {
  BrowserQRCodeReader,
  NotFoundException,
  ChecksumException,
  FormatException,
  BrowserCodeReader
} from "@zxing/library";
import React, { useEffect, useState } from "react";

export default function App() {
  const [code, setCode] = useState("");
  const [display, setDisplay] = useState("none");

  async function scanCode() {
    try {
      setDisplay("block");
      const codeReader = new BrowserQRCodeReader();
codeReader.listVideoInputDevices();
      ${selectedDeviceId}`);

      const previewElem = document.querySelector(
        "#test-area-qr-code-webcam > video"
      );

      const controls1 = await codeReader.decodeOnceFromVideoDevice(
        undefined,
        previewElem
      );

      alert(controls1.text);
      setDisplay("none");
    } catch (error) {
      console.log(error);
    }
  }

  useEffect(() => {}, []);

  return (
    <div className="App">
      <div id="test-area-qr-code-webcam" className={display}>
        <video></video>
      </div>
      <button onClick={scanCode}>Test Scan</button>
    </div>
  );
}

이거로 다시 한번 도전 해봐야겟다;;