🐾   [리액트] QR코드 만드는 방법

배경

회사에서 QR코드를 사용하는 서비스가 있다. 그런데 기획자 분이 QR안에 이미지를 넣고 싶다고 했다.

사용하는 모듈

import QR from "qrcode.react";

QR 생성법

<QR
        id="qr-gen"
        value={"URL주소"}
        size={사이즈 숫자로}
        imageSettings={{ src: "이미지주소", width: 100, height: 100 }} //사이즈
level={"H"}
includeMargin={false} //QR 테두리 여부
bgColor={"pink"} //배경색
fgColor={"#111111"} //QR색
/>

예시

<QR
        value={"https://pink1016.tistory.com/"}
        size={500}
        imageSettings={{ src: logo, width: 100, height: 100 }}
        id="qr-gen"
        level={"H"}
        includeMargin={false}
        bgColor={"pink"}
        fgColor={"yellow"}
/>

이미지 있는 경우

imageSettings={{ src: logo, width: 100, height: 100 }}
image

QR 색 변경하는 방법

 fgColor={"yellow"}
image

배경에 색 넣기

  bgColor={"pink"}
image

QR 테투리 있는 경우

includeMargin={true}
image

QR 테투리 없는 경우

includeMargin={false}
image

참조

https://www.npmjs.com/package/qrcode.react

이슈

https://github.com/YooGenie/react-study/issues/3

​ ​ ​