QR코드를 표시하는 화면을 만들었으므로, 그 때의 정리입니다.
react로 QR 코드를 생성하는 라이브러리가 여러 가지 있었으므로,
hook의 쓰는 방법에 대응하고 있는 것으로,
낡은 코드 리더에서도 비교적 읽기 쉬운 QR 코드를 생성해 오는 것을 찾아냈습니다.

고려한 라이브러리

react-qrcodes
htps //w w. 음 pmjs. 코 m / Pac 카게 / Rea ct-qr 여기 s
도입도 심플하고 낡은 기기로의 읽기도 문제 없었기 때문에 이번은 이것을 사용해 보기로 했습니다.

react-qrbtf
htps //w w. 음 pmjs. 코 m / Pac 카게 / Rea ct-qrbtf
색을 붙이고, 코드 부분을 사각형이 아닌 원으로 ​​표현할 수 있고, 즐거운 것입니다.
(iPhone의 카메라에서 읽을 수있었습니다)

구현

우선 패키지 설치

npm i react-qrcodes

QR 코드를 표시하는 화면을 만들어 갑니다.

qrcode.js

import React from 'react';
import { useQRCode } from 'react-qrcodes';

function App() {
  const [inputRef] = useQRCode({
    text: 'https://qiita.com/hujuu',
    options: {
      level: 'H', //誤り訂正レベル
      margin: 3, //QRコードの周りの空白マージン
      scale: 1, 
      width: 200,
    },
  });

  return <canvas ref={inputRef} />;
};

export default App;

파라미터 정보

오류 정정 레벨
에러 정정 레벨은, 「얼마만큼의 얼룩까지 대응하는가」를 나타내고 있습니다.
스마트 폰에서 QR 코드를 내려고 생각했기 때문에, 화면의 쓰레기나 빛의 반사 등 고려해 high로 해 보았습니다.

참고 자료: htps //w w. qr 여기에서. 코 m / 아보 t / 에로 r_ これ c 치온. HTML

마진
QR 코드는 코드 주위에 일정한 공백 구간이 어느 정도 필요합니다.
공백 없이 다른 텍스트나 디자인이 그려져 있으면 읽을 수 없는 경우가 있습니다.

참고 자료: htps //w w. qr 여기에서. 코 m/호 w와/코로. HTML

완성

react-qrcodes로 생성한 코드는 이런 느낌이 들었습니다.