[리액트] 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 }}

# QR 색 변경하는 방법

 fgColor={"yellow"}

# 배경에 색 넣기

  bgColor={"pink"}

#  QR 테투리 유무

includeMargin={true}

테두리 있는 경우

includeMargin={false}

테두리 없는 경우

 

 

# 참조

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

qrcode.react

 

 

 

# 이슈

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

QR코드 만들기 · Issue #3 · YooGenie/react-study