React를 사용하여 QR 코드 생성

React를 사용하여 QR 코드 생성
QR 코드(빠른 응답 코드)는 광고에 QR 코드를 제공한 최초의 소매업체였습니다. QR 코드는 디지털 장치에서 쉽게 읽을 수 있으며 정보를 정사각형 모양의 그리드에 일련의 픽셀로 저장합니다.
스마트폰의 카메라가 읽을 수 있도록 URL 또는 기타 정보를 정렬하는 데 일반적으로 사용되는 흑백 사각형 배열로 구성된 기계 판독 가능 코드입니다.
QR 코드(빠른 응답 코드의 약자)는 일본 자동차 회사인 Denso Wave에서 1994년에 발명한 일종의 매트릭스 바코드(또는 2차원 바코드)입니다. 바코드는 부착된 항목에 대한 정보를 포함할 수 있는 기계 판독 가능 광학 레이블입니다. 실제로 QR 코드에는 웹사이트나 애플리케이션을 가리키는 로케이터, 식별자 또는 추적기에 대한 데이터가 포함되는 경우가 많습니다. QR 코드는 데이터를 효율적으로 저장하기 위해 4가지 표준화된 인코딩 모드(숫자, 영숫자, 바이트/바이너리 및 한자)를 사용합니다. 확장자를 사용할 수도 있습니다.
목표
이 기사에서는 React.js 애플리케이션에서 QR 코드를 생성하는 방법을 보여줍니다.

내용의 테이블

소개

React 설치 및 설정

구성 요소 만들기

QR 코드 패키지 사용

QR 코드 리더 사용하기

결론

React 설치 및 설정
다음 단계는 양식 애플리케이션을 만들기 전에 반응을 설치하는 것입니다. 이 라이브러리를 사용할 수 있는 방법은 NPM과 CDN 두 가지가 있지만 이 기사에서는 NPM을 사용하여 애플리케이션을 설치합니다.

다음 명령을 사용하여 React 애플리케이션을 설치합니다.

npx create-react-app qrcode

QR 코드 아래 반응 애플리케이션을 성공적으로 설치했습니다.

구성 요소 만들기
여기에서 작업에 사용할 구성 요소 폴더, App.js 및 Index.js를 만들어야 합니다.
다음은 index.js 형식입니다.



아래는 App.js 파일입니다.



index.js에서 분석하면 QR 코드의 값을 나타내는 텍스트를 전달할 수 있습니다. 모든 QR 코드는 숫자, 영숫자, 바이트/이진 또는 간지 값을 나타내기 때문입니다. 우리 자신이 "낡은 열쇠"를 나타내면 QR 코드는 낡은 열쇠를 나타냅니다. 그러면 표시됩니다.

<App text="worn off keys" />

App.js에서 적절한 소스를 생성할 수 있도록 가져온 QR 코드 패키지['qrcode'에서 QRCode 가져오기]를 사용하려면 아래 "setSrc"함수를 사용하여 변수 내부에 설정합니다.

useEffect(() => {
  QRCode.toDataURL(text).then(setSrc);
}, []);

이것이 우리 앱의 모습입니다.



QR 코드의 크기는 더 많은 데이터를 저장하기 때문에 App.js 텍스트 코드 블록에 제공된 데이터의 크기에 따라 다릅니다.

<
    App text="wornoffkeys.comwornoffkeys.comwornoffkeys.comwornoffkeys.comwornoffkeys.com" />
);

결론
QR 코드는 땀을 흘리지 않고도 제품이나 서비스에 대한 더 많은 정보를 제공할 수 있으며 정보는 사용자의 장치로 빠르게 이동합니다. 기본적으로 QR 코드는 휴대폰을 통해 상호 작용과 참여를 촉진합니다. 이러한 유형의 마케팅 전략을 통해 기업은 사용자에게 정보를 전달할 수 있습니다.

오늘날 우리는 QR 코드 라이브러리와 React를 사용하여 QR 코드를 생성할 수 있습니다.