QRCode 라이브러리 불러와서 QR코드 만들기

import React, { useState, useEffect } from 'react';
import QRCode from 'qrcode';
import DownloadIcon from '@mui/icons-material/Download';
import { useTranslation } from "next-i18next"

const QRCodeGenerator = (props) => {
    const { t } = useTranslation(["inventory"]);

    const propsurl = props.url
    const [qrCodeURL, setQRCodeURL] = useState(null);

    const generateQRCode = async () => {
        try {
            const url = await QRCode.toDataURL(propsurl);
            setQRCodeURL(url);
        } catch (error) {
            console.error('Failed to generate QR code', error);
        }
    };

    useEffect(() => {
        generateQRCode();
    }, [propsurl]);

    const QRDownloadHandler = () => {
        if (qrCodeURL) {
            const link = document.createElement('a');
            link.href = qrCodeURL;
            link.download = 'qrcode.png';
            link.click();
        }
    };

    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
            {qrCodeURL && <img src={qrCodeURL} alt="QR Code" style={{ marginBottom: '10px' }} />}
            <button
                onClick={QRDownloadHandler}
                style={{ display: 'flex', alignItems: 'center', backgroundColor:'#000', color:'#fff',border: 'none', cursor: 'pointer', fontSize: '16px', padding:'8px 24px', borderRadius:'8px' }}
            >
                <DownloadIcon style={{ marginRight: '8px' }} /> {t('inventory:createpdf.download')}
            </button>
        </div>
    );
};

export default QRCodeGenerator;

---

나중에 다른 코드에서 불러와서 쓰고 싶다면 이렇게 해주면 된다.

<QRCodeGenerator url={QRurl}/>