React : state 예제

#1. 토글 버튼 만들기

// #4 문제
// 토글 버튼을 만드세요
// 1. state 값을 true로 놓기
// 2.state가 ture일시 화면에 <h1>가게가 오픈되었습니다</h1> 출력
// 3. 버튼을 놓고 버튼의 문구는 {개,폐장}
// 4. 해당 버튼을 눌렀을 시 state 값이 false로 변경
// 5. state가 false가 되었을 시 화면에 <h1>영업중이 아닙니다</h1> 출력

나의 풀이

import { useState } from "react";
import './App.css'

 function App(){
  const [toggle, setToggle]= useState(true);
  const openclose=()=>{
    (toggle == true) ? setToggle(toggle => false) : setToggle(toggle => true)
  }

  return(
    <div>
      <h1>{toggle == true? "가게를 오픈했습니다" : "가게를 닫았습니다"}</h1>
      <button onClick={openclose}>{toggle == true ? "close" : "open"}</button>
    </div>
  )
 }
export default App

선생님 풀이

import { useState } from "react";
import './App.css'

function App(){
  const[toggle,setToggle] = useState(true)
  return(
  <div>
    <button onClick={()=>setToggle(toggle=>!toggle)}>{toggle?"폐장":"개장"}</button>
    {toggle? <h1>가게가 오픈되었습니다</h1>:<h3>영업중이 아닙니다</h3>}
  </div>
  )
}
export default App

#2. 업다운 게임 만들기

//#5 문제 <ip/down>
//업다운 게임을 만드세요
  //1. state 값을 입력값인 input1과 고정값인 currentValue 두개를 만든다
  //2. 태그는 각각 업다운 문구를 나타내는 h1 태그와 실행 버튼, 그리고 input 태그로 구성한다
  //3. 해당 input 태그는 onChange 이벤트로 해당 데이터의 내용을 실시간으로 갱신하도록 만든다
  //4. {실행} 버튼을 누르게 되면 입력 값인 input1과 currentValue를 비교하여 만약 input1의 값이 
  // currentValue 값보다 작다면 "업" 크다면 "다운" 같다면 "밎췄습니다"를 출력
  //*참고 : onChange 에 state 함수를 걸어 데이터를 실시간으로 받을 수 있다.

나의 풀이

import { useState } from "react";
import './App.css'

let random = parseInt(Math.random()*100)+1 // 1~100까지 랜덤 값
console.log(random)

function App(){
  const [input1,setInput1] = useState(0) 
  const [num,setNum] = useState(random) 
  const [result,setResult] = useState("") 

  function updown(){
    if(input1 == num){
      setResult("정답!")
    }else if(input1>num){
      setResult("DOWN")
    }else{setResult("UP")}
  }
  return(
    <div>
    <h1>{result}</h1>
    <input type="number" value={input1} onChange={e=> setInput1(e.target.value)} />
    <button onClick={updown}>UP!DOWN!</button>
    </div>
  )
}
export default App

#3. 가위바위보 게임 만들기

//#6 가위바위보
  //가위바위보 게임을 만드세요
  // 1. 사용자의 상태값을 받는  user 상태값과 , 컴퓨터 상태값을 받는 com 받는다
  // 2. 사용자의 상태값을 input 창을 통해서 입력 받는다
  // 3. 버튼을 눌러 user와 com의 값을 비교한 후에 h1 태그에 출력하여
  //    각각 "이겼습니다","졌습니다","비겼습니다"를 출력하는 게임을 만들어라

나의 풀이

import { useState } from "react";
import './App.css'

 function App(){


    const[input1,setInput1] = useState(1);
    const[com,setCom] = useState(1);
    const[result,setresult] = useState("");
    const[comresult,setcomresult] = useState("");

    function gettext(){

      setCom(parseInt(Math.random()*3)+1) // 버튼을 누를 때 마다 1~3 랜덤 값
      
      if(input1 == "" || input1>3 ){
        setresult("올바른 값을 입력해주세요")
        } 
      else if(com == input1){
        setresult("비겼습니다")
      }else if((input1%3+1)==com){
        setresult("졌습니다")
      }else{
        setresult("이겼습니다")
      }
      console.log(com)
      console.log(input1)
    
      if(com == 1){
        setcomresult("가위")
      }else if( com == 2){
        setcomresult("바위")
      }else{ setcomresult("보")}
      
    }

    return(
      <div>
        <h2>{comresult}</h2>
        <h1>{result}</h1>
        <input type="number" value={input1} onChange={e => setInput1(e.target.value)}/>
        <button onClick={gettext} >가위바위보!</button>
      </div>
    )

   }
export default App