Python
[Python] react
아잠만_
2024. 7. 17. 11:26
예제 - 문자열 바꾸기
import { useState } from 'react'
import './App.css'
function App() {
const [txt, settxt] = useState("Good Morning");
const myclick = () => {
settxt("Good Morning");
}
return (
<>
<h1>Vite + React</h1>
<div className="card">
{txt}
<br/>
<input type="button" value="CLICK" onClick={() => settxt(() => "Good Evening")}/>
<input type="button" value="CLICK" onClick={myclick}/>
</div>
</>
)
}
export default App예제 - 로또
import { useState } from 'react'
import './App.css'
function App() {
const arr = [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,
31,32,33,34,35, 36,37,38,39,40,
41,42,43,44,45];
const [num1,setnum1] = useState("__");
const [num2,setnum2] = useState("__");
const [num3,setnum3] = useState("__");
const [num4,setnum4] = useState("__");
const [num5,setnum5] = useState("__");
const [num6,setnum6] = useState("__");
const lotto = () => {
for(var i=0; i<100; i++){
var rand = parseInt(""+Math.random()*45);
// var rand = Math.floor(""+Math.random()*45);
var tem = arr[0];
arr[0] = arr[rand];
arr[rand]=tem;
}
var lottoArr = [arr[0], arr[1], arr[2], arr[3], arr[4], arr[5]];
lottoArr.sort((a,b) => a-b);
setnum1(lottoArr[0]);
setnum2(lottoArr[1]);
setnum3(lottoArr[2]);
setnum4(lottoArr[3]);
setnum5(lottoArr[4]);
setnum6(lottoArr[5]);
}
return (
<>
<h1>Vite + React</h1>
<div className="card">
<table border="1">
<tr>
<td>{num1}</td>
<td>{num2}</td>
<td>{num3}</td>
<td>{num4}</td>
<td>{num5}</td>
<td>{num6}</td>
</tr>
<tr>
<td colSpan={6}>
<input type="button" value="로또생성하기" onClick={lotto} />
</td>
</tr>
</table>
</div>
</>
)
}
export default App예제 - 구구단
import { useState } from 'react'
import './App.css'
function App() {
const [num, setnum] = useState("");
const [gugudan, setgugudan] = useState("");
const onChange = (e) => {
setnum(e.target.value);
}
const dan = () => {
var gugu = ""
for (let i = 1; i <= 9; i++) {
gugu += `${num} * ${i} = ${parseInt(num)*i}<br>`
}
setgugudan(gugu);
}
return (
<>
<h1>Vite + React</h1>
<div className="card">
<table border="1">
<tr>
<th>출력 단수</th>
<td>
<input type="text" value={num} onChange={onChange} />
</td>
</tr>
<tr>
<td colSpan="2">
<input type="button" onClick={dan} value="구구단"/>
</td>
</tr>
<tr>
<td colSpan="2">
<div dangerouslySetInnerHTML={{__html: gugudan}}></div>
</td>
</tr>
</table>
</div>
</>
)
}
export default App예제 - 전화 걸기
import { useState } from 'react'
import './App.css'
function App() {
const [telnum, settelnum] = useState("");
const onChange = (e) => {
settelnum(e.target.value);
}
function call(){
alert(telnum+"으로 전화거는 중...");
}
/*
function click(){
telnum+=this.value;
}
*/
const click = (event) => { // 화살표함수는 this불가능
var num = event.target.value;
settelnum(telnum.concat(num));
}
return (
<>
<h1>Vite + React</h1>
<div className="card">
<table border="1">
<tr>
<td colSpan="3">
<input type="text" value={telnum} onChange={onChange}/>
</td>
</tr>
<tr>
<td>
<input type="button" value="1" class="btn" onClick={click}/>
</td>
<td>
<input type="button" value="2" class="btn" onClick={click}/>
</td>
<td>
<input type="button" value="3" class="btn" onClick={click}/>
</td>
</tr>
<tr>
<td>
<input type="button" value="4" class="btn" onClick={click}/>
</td>
<td>
<input type="button" value="5" class="btn" onClick={click}/>
</td>
<td>
<input type="button" value="6" class="btn" onClick={click}/>
</td>
</tr>
<tr>
<td>
<input type="button" value="7" class="btn" onClick={click}/>
</td>
<td>
<input type="button" value="8" class="btn" onClick={click}/>
</td>
<td>
<input type="button" value="9" class="btn" onClick={click}/>
</td>
</tr>
<tr>
<td>
<input type="button" value="0" class="btn" onClick={click}/>
</td>
<td colspan="2">
<input type="button" value="☎" onClick={call}/>
</td>
</tr>
</table>
</div>
</>
)
}
export default App예제 - 숫자맞추기 (Up&Down)
import { useState } from 'react'
import './App.css'
function App() {
const [num, setnum] = useState("");
const [results, setResults] = useState("");
const [com,setCom] = useState(parseInt(""+Math.random()*99)+1);
const [cnt,setCnt] = useState(0);
const onChange = (e) => {
setnum(e.target.value);
}
function updown(){
let line = "";
if(num==""){
setnum("0");
}
let inum = parseInt(num);
if(inum>=100 || inum<=0) {
alert("1~99 숫자 사이를 입력해주세요");
setnum("");
return;
}
if(inum==com){
line = num + " 정답입니다 \n";
setCnt((cnt)=>cnt+1);
alert(num + " 정답입니다. \n"+cnt+"회차에 맞추셨습니다");
} else if(inum>com){
line = num + " DOWN \n";
setCnt((cnt)=>cnt+1);
} else if(inum<com) {
line = num + " UP \n"
setCnt((cnt)=>cnt+1);
} else {
alert("잘못된 입력입니다");
}
setResults(results+line);
setnum("");
}
return (
<>
<h1>Vite + React</h1>
<div className="card">
<table border="1">
<tr>
<th>맞출 수</th>
<td>
<input type="text" value={num} onChange={onChange} placeholder="1~99"/>
</td>
</tr>
<tr>
<td colSpan="2">
<input type="button" value="맞춰보기" onClick={updown}/>
</td>
</tr>
<tr>
<td colSpan="2">
<textarea value={results} rows="20"/>
</td>
</tr>
</table>
</div>
</>
)
}
export default App