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

결과 QR 코드

 

프로젝트에서 주소를 복사하기 위해서

QR 코드를 생성하고 스캔해야 하는

기능을 구현해야 했었는데요.

 

먼저 QR 코드 생성을 위해서

qrcode.react 라이브러리를 사용했습니다.

사용방법 알아봅시다 😀

 

QR코드 스캔은 2탄으로 작성할게요

---

📝 라이브러리 소개

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

qrcode.react

⦁ qrcode.react

주간 다운로드 수 100만이 넘는 인기 있는 라이브러리입니다.

사용방법이 간단하고 다양한 props를 지원하여 QR 코드의 색상 등을 쉽게 변경할 수 있습니다.

또한 캔버스로 QR 코드를 생성하기 때문에 필요에 따라 이미지 파일로 저장하는 것도 가능합니다. 

 

기존 서버에서 생성하고 전달받았던 QR코드는 스타일 커스터마이징이 불가능했는데,

해당 라이브러리를 사용해서 프런트엔드에서 생성할 경우 테마에 따른 색상 등

디자인 요구사항을 쉽게 맞출 수 있어서 좋았습니다. 😎

 

⦁ Install

npm install qrcode.react
// or
yarn add qrcode.react

 

⦁ 공식문서 샘플코드

// QRCodeSVG 
import ReactDOM from 'react-dom';
import {QRCodeSVG} from 'qrcode.react';

ReactDOM.render(
  <QRCodeSVG value="https://reactjs.org/" />,
  document.getElementById('mountNode')
);

// QRCodeCanvas
import ReactDOM from 'react-dom';
import {QRCodeCanvas} from 'qrcode.react';

ReactDOM.render(
  <QRCodeCanvas value="https://reactjs.org/" />,
  document.getElementById('mountNode')
);

공식 문서에 있는 샘플코드입니다.

QRCodeSvg와 QRCodeCanvas 2가지 방식이 존재합니다.

 

말 그대로 SVG와 Canvas 둘 중 무엇으로 렌더링 하냐의 차이라고 하는데,

프로젝트 환경에 맞게 선택하면 될 것 같습니다.

블로그나 챗GPT 에서는 <QRCode value="https://example.com" />
이런 방식으로 알려주는 경우가 많은데, 지금은 동작하지 않는 걸 보니 예전 버전의 코드인듯 합니다.

 

⦁ QR 코드 커스터마이징

 

문서를 조금 내리면 사용 가능한 Props 목록이 존재합니다.

주요 Props 목록은 다음과 같습니다.

value: QR 코드로 인코딩할 값 (URL, 텍스트 등)
size: QR 코드의 크기 (기본값은 128px)
bgColor: QR 코드 배경색 (기본값은 흰색)
fgColor: QR 코드 전경색 (기본값은 검은색)

 

---

---

📝 소스코드

⦁ GenerateQrCode.jsx

'use client';

import React from 'react';
import { Box, styled, useTheme } from '@mui/material';
import { QRCodeCanvas } from 'qrcode.react';

const Container = styled(Box)({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  width: '100%',
  height: '100%',
});

function GenerateQrCode({ address, size = 108, bgColor = null }) {
  const theme = useTheme();

  return (
    <Container>
      <QRCodeCanvas
        value={address}
        size={size}
        bgColor={bgColor ? bgColor : theme.palette.background.paper}
        fgColor={theme.palette.mode === 'dark' ? '#fff' : '#000'}
      />
    </Container>
  );
}

export default GenerateQrCode;

...

// 사용하는 곳
<GenerateQrCode address={data.address} />

 

저는 Next.js의 CSR과 MUI의 Theme를 사용하고 있기 때문에

위와 같은 컴포넌트를 만들었습니다.

 

핵심 코드인 QRCodeCanvas는 변하지 않으니 참고하세요! 🥳

다음 포스팅은 QR코드를 스캔하는 방법으로 돌아오겠습니다.

---

 

---

참고 문헌 : 

https://www.npmjs.com/package/qrcode.react?activeTab=readme