티스토리 뷰

프론트엔드/React

[React.js] QR Code 생성

celine_e 2021. 8. 17. 13:14

[조건]
1. 입력한 값을 QR Code로 생성
2. 생성된 QR 코드를 리더에서 정상 인식 하는 지 확인

 

[React.js 설치하기]
1. Node.js 최신 버전을 다운 받습니다.
- 다운 받는 곳 : https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

- Node. js를 설치하는 이유는 create-react-app 라이브러리 때문입니다. node.js를 설치하면 npm이라는 tool이 이용가능합니다.
npm을 이용하여 create-react-app을 이용할 예정입니다.
2. cmd(명령 프로토콜)에서 node -v, npm -v를 입력해 설치 유무를 확인합니다.
3. 프로젝트폴더를 생성합니다.
4. vs code를 이용하여 프로젝트 폴더를 오픈합니다.
5. vs code에서 new Terminal을 열고 npx create-react-app {프로젝트명}을 생성합니다.
6. 다시 프로젝트 폴더를 오픈합니다.

[React.js]
1.App.js에서 코드를 입력합니다.
- app.js는 메인페이지에 들어갈 html 코딩을 하는 곳입니다.
2. 미리보기 하기 위해서는 terminal에 npm start를 하면 미리보기가 가능합니다.
[Qr code 생성]
npm install qrcode.react를 설치합니다.

https://github.com/zpao/qrcode.react

 

GitHub - zpao/qrcode.react: A <QRCode/> component for use with React.

A <QRCode/> component for use with React. Contribute to zpao/qrcode.react development by creating an account on GitHub.

github.com

<app.js>

import React, { useState } from 'react';
import './App.css';
import logo from './logo.svg';



function App() {
	
    var title = 'email을 수정하면 QRCode가 변경';
    var React = require('react');
    var QRCode = require('qrcode.react');
 
  
    let [mail, chageMail] = useState("celine@publishsoft.io");

  

  return (
    <div className="App">
        // 태그에 class를 주고 싶다면 jsx문법 사용하여 className
       
			<p> {title} </p> 
				// react 데이터 바인딩 {변수명, 함수}
     
      <input onChange = {e=>chageMail(e.target.value) }type="email" id="test" value= {mail}/> 
        
     //  e.target.value is the value property of some DOM element,
      in this case that means the text entered in the search input.

      <br></br>
      
      <QRCode value= {mail} />
				
	  <img src = {logo}/> 
	 // 이미지 넣는 법 

    </div>
  );

  
     
}


export default App;

<index.js>

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import QRCode from "qrcode.react";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(<App />, document.getElementById("QR"));

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

<index.html>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="QR">
      
    </div>
       
</body>

 

'프론트엔드 > React' 카테고리의 다른 글

React Router Dom  (0) 2023.02.02
React Folder Structure  (0) 2023.02.02
npm, npx  (0) 2023.01.18
Nodemon  (0) 2023.01.17
Node.js / express.js  (0) 2023.01.16
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/04   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
글 보관함