[React] 리액트 QR 코드 스캔하기 (react-qr-reader)

https://hyunki99.tistory.com/117

[React] 리액트 QR 코드 생성하기 (qrcode.react)

QR 코드 생성은 이쪽입니다. 😀

 

---

QR 코드 스캔 결과화면

 

저번 포스팅에서 QR 코드를 생성했으니,

이번에는 QR 코드 스캔입니다.

 

HTML5의 웹 표준 API인 getUserMedia를 사용하면

사용자의 브라우저에서 카메라에 접근할 수 있습니다.

이 영상 데이터를 통해서 QR 스캔 등 필요한 기능을 구현할 수 있습니다.

 

하지만 직접 구현하는 방법은 시간과 노력과 연구가 필요하기 때문에

오픈소스를 채택할 수 있는 상황이라면

qr-scanner, react-qr-reader 등의

외부 라이브러리를 사용하는 것을 추천드립니다. 😀

 

그중에서도 오늘은 QR 스캔 라이브러리 중

react-qr-reader의 사용법에 대해 소개하겠습니다.

 

---

📝 라이브러리 소개

https://www.npmjs.com/package/react-qr-reader?activeTab=readme#browser-support

react-qr-reader

⦁ 소개

제가 찾은 라이브러리 중 가장 주간 다운로드 수가 높은 라이브러리였습니다.

아무래도 QR 코드 생성에 비해서는 다운로드 수가 확연히 낮네요.

모바일 앱이 아닌 웹에서는 QR 코드를 스캔할 일이 많지 않아서 인 것 같습니다.

 

⦁ 설치

npm install react-qr-reader
또는
yarn add react-qr-reader

 

⦁ 호환성

• Chrome Mac OS & Android
• Firefox Mac OS & Android
• Safari Mac OS & IOS

내부적으로 훅을 사용하기 때문에 React 16.8 버전 이상의 환경이어야 한답니다.

 

⦁ Component API ( props 목록 )

GPT한테 테이블 번역을 부탁했습니다. 편하네요

constraints={{ facingMode: 'environment' }}

// environment : 후면 카메라
// user : 전면 카메라

 

⦁ 샘플코드

import React, { useState } from 'react';
import { QrReader } from 'react-qr-reader';

function QRCodeScanner() {
  const [scanResult, setScanResult] = useState(null);
  const [error, setError] = useState(null);

  // 스캔이 성공했을 때 로직 작성하세요 !
  const handleScan = (result) => {
    if (result) {
      setScanResult(result?.text || result); 
    }
  };

  // 스캔이 실패했을 때 로직 작성하세요 !
  const handleError = (err) => {
    console.error("QR Scan Error:", err);
    setError("An error occurred while scanning. Please try again.");
  };

  return (
    <div style={{ textAlign: 'center' }}>
      <h2>QR Code Scanner</h2>
      <div style={{ width: '300px', margin: 'auto' }}>
        <QrReader
          onResult={(result, error) => {
            if (result) handleScan(result);
            if (error) handleError(error);
          }}
          style={{ width: '100%' }}
          constraints={{ facingMode: 'environment' }} // 기본 후면 카메라 사용
        />
      </div>
      {scanResult && <p>Scanned Result: {scanResult}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

export default QRCodeScanner;

 

Chat GPT가 작성해준 샘플 코드인데, 이렇게만 해도 잘 동작합니다.

 

⦁ 커스터마이징

<QrReader
    onResult={(result, error) => {
      if (result) handleScan(result);
      if (error) handleError(error);
    }}
    constraints={{ facingMode: 'environment' }}
    // 화면을 가득 채우도록 설정
    containerStyle={{
      width: '100%',
      height: '100%',
    }}
    videoContainerStyle={{
      width: '100%',
      height: '100%',
      overflow: 'hidden',
    }}
    videoStyle={{
      width: '100%',
      height: '100%',
      objectFit: 'cover',
    }}
/>

 

저는 비디오가 화면 전체를 채우는 것이 필요했기 때문에 스타일 props를 지정해줬습니다.

 

 

결과 사진에는 하단 검은 정보 div, 스캔 영역 이미지가 추가되어 있는데 이건 absolute로 따로 구현했습니다.

ViewFinder Props를 사용해 보려고 했는데, 위치를 잘 못 잡더라고요. 이 점 참고하세요!

 

---

---

 

다 만들고 나니 패키지 번들 크기가 qr-scanner에 비해

너무 크다는 것을 늦게 알아버렸습니다. 🥲

 

( bundlejs 기준 크기 )

qr-scanner : 16kb

react-qr-reade : 99.8kb

 

이 라이브러리도 훌륭하지만,

성능과 번들 크기가 중요하다면

qr-scanner 라이브러리를 사용하는 것을 고려해보세요!

 

저는 다시 만들러 가볼게요

 

---

---

참고 문헌 : 

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia