리액트 QR코드 생성[자신감up 실습16]

 

렌더링 내용

---

>npm install qrcode.react 

 

윗코드대로 설치 후, 아래처럼 간단한 코드로 구현가능.

import QRCode from "qrcode.react";

import React, { useState } from "react";

function QRCreator() {

  const [qrdata, setARdata] = useState();

  const hInputChange = (e) => {

    setARdata(e.target.value);

  };

  return (

    <>

      <h1>QR 생성기</h1>

      <input

        type="text"

        placeholder="QR내용을 입력해주세요"

        onChange={hInputChange}

      />

      {qrdata && (

        <p>

          <QRCode value={qrdata} />

        </p>

      )}

    </>

  );

}

export default QRCreator;