[React/Typescript] 간단한 QR생성 및 스캔 방법

이번에 프로젝트를 하면서 QR코드 생성과 스캔할 일이 있어서 여러 라이브러리를 찾아보고 테스트를 해보았다.

 

QR 생성

QR코드 생성은 매우 편하다.

 

qrcode.react 라이브러리를 사용하면 매우 편하게 qr코드를 생성할수 있다.

 

yarn add qrcode.react

import { Container } from "@mui/material";
import QRCode from "qrcode.react";

export default function Register() {
  const [value,setValue] = useState<{
      name: string;
      age: string;
      }>({
      name: '홍길동',
      age: '26'
      })

  return (
  <>
    <Container>
       <QRCode value={JSON.stringify(value)}/>
    </Container>
   </>
  );
}

 

위의 코드처럼 QRCode 위치만 정해준 후 JSON.stringify에 value값만 넣으면 자동으로 생성 된다.

생성된 qr을 다운 받고 싶은경우

 

 const handleDownloadClick = () => {
    const canvas = document.querySelector("canvas");
    const url = canvas ? canvas.toDataURL("image/png") : "";
    const link = document.createElement("a");
    link.href = url;
    link.download = `test.png`;
    // 저장되는 파일 이름이다.
    link.click();
  };

 

위의 함수를 버튼을 만들어서 넣기만 하면 QR코드를 다운 받을 수 있다.

 

QR 스캔

실시간으로 카메라에서 qr코드를 읽어야 됬기에 사진이나 동영상에서 qr을 읽는 방식은 제외하고 카메라에서 직접 읽는 방식 위주로 찾아보았다.

 

guagga, jsQR, instascan, qr-scanner 라이브러리 이렇게 4개를 사용해본 결과 qr-scanner가 Typescript기반에서는 가장 간편했다.

 

instascan, guagga는 Typescript에서 지원을 제대로 해주지 않아서 설치해야 할것과 설정해야될것이 많아서 사용하기에 힘들고, jsQR의 경우 카메라 사용하는 라이브러리를  사용하여 따로 카메라를 켠 후 화면을 읽는 라이브러리이기에 인식율이 많이 좋지도 않고 카메라의 인식 속도 등을 바꾸는 기능이 없었다.

 

 

yarn add qr-scanner

import { useEffect, useRef } from "react";
import QrScanner from "qr-scanner";

export default function Qrscan() {
  const videoRef = useRef(null);

  const handleScan = (result: QrScanner.ScanResult) => {
    const parsedData = JSON.parse(result.data);
    console.log(parsedData);
  };

  useEffect(() => {
    const videoElem = videoRef.current;
    if (videoElem) {
      const qrScanner = new QrScanner(videoElem, (result) => handleScan(result), QrOptions);
      qrScanner.start();

      return () => qrScanner.destroy();
    }
  }, []);

  return (
          <video ref={videoRef} style={{ width: "300px", height: "300px", objectFit: "cover" }} autoPlay playsInline />
  );
}

export const QrOptions = {
  // 핸드폰의 경우, 외부 카메라인지 셀프카메라인지
  preferredCamera: "environment",
  // 1초당 몇번의 스캔을 할 것인지? ex) 1초에 60번 QR 코드 감지한다.
  maxScansPerSecond: 60,
  // QR 스캔이 일어나는 부분을 표시해줄 지 (노란색 네모 테두리가 생긴다.)
  highlightScanRegion: true,
};

 

 

다음과 같이 코드를 나타낼 수 있다. video에 특정 qr에 인식 될 경우 handleScan이 동작된다. 

QR옵션을 통해서 카메라 종류 및 스캔 시간 등을 설정할 수 있다.