ReactJs QR 코드 생성기

QR(Quick Response) 코드는 많은 데이터를 저장할 수 있으며 사용자는 QR 코드를 스캔하여 정보에 쉽게 접근할 수 있습니다. 이 블로그에서는 ReactJs를 사용하여 QR 코드 생성기 앱을 만드는 방법을 설명하겠습니다.

미리보기는 다음과 같습니다.



시작하자...

새로운 React Js 프로젝트를 생성합니다.

$ npx create-react-app qr-code-generator 
$ cd qr-code-generator
$ npm start

애플리케이션을 VSCode 편집기로 엽니다. 그 안에서 'src' 폴더를 확장합니다. 그 안에는 'App.css'와 'App.js'라는 두 개의 파일이 있습니다. 여기서 App.js는 모든 논리를 포함하는 앱의 유일한 기본 구성 요소입니다. 필요한 QR 코드 이미지를 가져오기 위해 'create-qr-code'이라는 무료 오픈 소스(인증 필요 없음) API를 사용할 것입니다.

이제 App.js 파일에 다음 코드를 작성하십시오.

import { useEffect, useState } from 'react';
import {useRef} from 'react';
import './App.css';

function App() {

  const inputRef = useRef(null);
  const [qrUrl, setWord] = useState("");
  const [qrImg, setQrCode] = useState("");
  const [active, setQrCodeStatus] = useState("");

  useEffect(() => {
    setQrCode
  (`http://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrUrl}`);
  },);

  function generateQR() {
    let qrValue = inputRef.current.value.trim();
    if(!qrValue) return;
    setWord(qrValue);
    setQrCodeStatus("active");
  }

  const inputChange = event => {
    if(event.target.value === '') setQrCodeStatus('inActive');
  };

  return (
    <div className={ `wrapper ${active} === 'active' ? "wrapper active" : "wrapper"` }>
      <header>
        <h1>QR Code Generator</h1>
        <p>Paste a url or enter text to create QR code</p>
      </header>
      <div class="form">
        <input ref={inputRef} onChange={inputChange} type="text" id="qr_code" name="qr_code" spellcheck="false" placeholder="Enter text or url" />
        <button onClick={generateQR}>Generate QR Code</button>
      </div>
      <div class="qr-code">
        <img src={qrImg} alt="qr-code" />
      </div>
    </div>
  );
}

export default App;

이제 App.css라는 파일을 편집하여 앱을 디자인해 보겠습니다.

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  padding: 0 10px;
  min-height: 100vh;
  align-items: center;
  background: #3498DB;
  justify-content: center;
}
.wrapper{
  height: 265px;
  max-width: 410px;
  background: #fff;
  border-radius: 7px;
  padding: 20px 25px 0;
  transition: height 0.2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.wrapper.active{
  height: 530px;
}
header h1{
  font-size: 21px;
  font-weight: 500;
}
header p{
  margin-top: 5px;
  color: #575757;
  font-size: 16px;
}
.wrapper .form{
  margin: 20px 0 25px;
}
.form :where(input, button){
  width: 100%;
  height: 55px;
  border: none;
  outline: none;
  border-radius: 5px;
  transition: 0.1s ease;
}
.form input{
  font-size: 18px;
  padding: 0 17px;
  border: 1px solid #999;
}
.form input:focus{
  box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.form input::placeholder{
  color: #999;
}
.form button{
  color: #fff;
  cursor: pointer;
  margin-top: 20px;
  font-size: 17px;
  background: #3498DB;
}
.qr-code{
  opacity: 0;
  display: flex;
  padding: 33px 0;
  border-radius: 5px;
  align-items: center;
  pointer-events: none;
  justify-content: center;
  border: 1px solid #ccc;
}
.wrapper.active .qr-code{
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s 0.05s ease;
}
.qr-code img{
  width: 170px;
}

@media (max-width: 430px){
  .wrapper{
    height: 255px;
    padding: 16px 20px;
  }
  .wrapper.active{
    height: 510px;
  }
  header p{
    color: #696969;
  }
  .form :where(input, button){
    height: 52px;
  }
  .qr-code img{
    width: 160px;
  }  
}

애플리케이션 실행 단계: 프로젝트의 루트 디렉터리에서 다음 명령을 사용하여 애플리케이션을 실행합니다.

$ npm start

출력: 이제 브라우저를 열고 http://localhost:3000/ 로 이동하면 다음 출력이 표시됩니다.



GitHub에 있는 저장소에 별표 표시하는 것을 잊지 마십시오. 별은 저에게 동기를 부여하고 높이 평가합니다.

코드리뷰 환영합니다. 내가 더 잘할 수 있는 일이 있으면 알려주세요.