[Python] react

예제 - 문자열 바꾸기

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