Web_React #23

210906
Web_React #23

• State
  react의 변수라고 할 수 있다.
  사용을 위해서는 import { useState } from 'react'가 필요하다.

import { useState } from 'react'
import Button from './Button'
import Dice from './Dice'

function App() {
  const [num, setNum] = useState(1)
  
  return (
    <div>
      <div>
        <Button>던지기</Button>
        <Button>처음부터</Button>
      </div>
      <Dice color="red" num={2} />
    </div>
  )
}

export default App

ustState함수를 살펴보자
const [num, setNum] = useState(1)
파라미터로 초기값을 받고 배열의 형태로 요소 두개를 return
첫번째 요소 : state 값 -> 현재 변수의 값을 나타냄
두번째 요소 : setter 함수 -> 호출할 때 파라미터로 전달한 값으로 state값이 변형된다.(반드시 이 setter함수로 값을 변경해야한다.)

-App.js

import { useState } from 'react'
import Button from './Button'
import Dice from './Dice'

function App() {
  const [num, setNum] = useState(1)

  const handleRollClick = () => {
    setNum(3)
  }

  return (
    <div>
      <div>
        <Button onClick={handleRollClick}>던지기</Button>
        <Button>처음부터</Button>
      </div>
      <Dice color="red" num={num} />
    </div>
  )
}

export default App

state의 num 값을 Dice의 prop으로 전달해준다.
onClick prop에 handleRollClick 전달.

-Button.js

function Button({ children, onClick }) {
  return <button onClick={onClick}>{children}</button>
}

export default Button

onClick prop을 받고 button의 onClick시 onClick을 전달하도록 한다.

던지기 누르기 전

후

주사위의 눈이 3으로 변경

이제 이 수를 랜덤으로 바꾼다면?
-App.js

import { useState } from 'react'
import Button from './Button'
import Dice from './Dice'

// 1~n까지의 랜덤한 정수 반환
function random(n) {
  return Math.ceil(Math.random() * n)
}

function App() {
  const [num, setNum] = useState(1)

  const handleRollClick = () => {
    const nextNum = random(6) //1~6까지의 랜덤한 숫자를 가진다.
    setNum(nextNum)
  }

  return (
    <div>
      <div>
        <Button onClick={handleRollClick}>던지기</Button>
        <Button>처음부터</Button>
      </div>
      <Dice color="red" num={num} />
    </div>
  )
}

export default App

랜덤하게 숫자가 변경된다.

-초기화 기능
num state를 1로 변경하면 된다.
-App.js

import { useState } from 'react'
import Button from './Button'
import Dice from './Dice'

// 1~n까지의 랜덤한 정수 반환
function random(n) {
  return Math.ceil(Math.random() * n)
}

function App() {
  const [num, setNum] = useState(1)

  const handleRollClick = () => {
    const nextNum = random(6) //1~6까지의 랜덤한 숫자를 가진다.
    setNum(nextNum)
  }

  const handleClearClick = () => {
    setNum(1)
  }

  return (
    <div>
      <div>
        <Button onClick={handleRollClick}>던지기</Button>
        <Button onClick={handleClearClick}>처음부터</Button>
      </div>
      <Dice color="red" num={num} />
    </div>
  )
}

export default App

처음부터 버튼을 클릭시 주사위 눈이 1로 변경된다.

-가위바위보
버튼 클릭시 가위바위보 패를 내고 상대는 랜덤한 패를 낸다. 결과 출력

사용자와 컴퓨터의 패를 표시하고 승부의 결과를 내기 위한 state를 만든다.

const [Hand, setHand] = useState('rock')
const [OtherHand, setOtherHand] = useState('rock')

각 패의 버튼 혹은 처음부터 클릭시 Hand와 OtherHand의 값을 변경하도록 하는 함수를 생성한다.

const handleClick = (value) => {
    setHand(value)
    setOtherHand(random(2))
}
const handleClearClick = () => {
    setHand('rock')
    setOtherHand('rock')
}

-App.js

import { useState } from 'react'
import Button from './Button'
import HandButton from './HandButton'
import HandIcon from './HandIcon'
import utils from './utils'

const rsp = ['rock', 'scissor', 'paper']

const getResult = (player, pc) => {
  if (utils[player] === pc) return '승리'
  if (utils[pc] === player) return '패배'
  return '무승부'
}
function random(n) {
  return rsp[Math.ceil(Math.random() * n)]
}

function App() {
  const [Hand, setHand] = useState('rock')
  const [OtherHand, setOtherHand] = useState('rock')
  const handleClick = (value) => {
    setHand(value)
    setOtherHand(random(2))
  }
  const handleClearClick = () => {
    setHand('rock')
    setOtherHand('rock')
  }

  return (
    <>
      <Button onClick={handleClearClick}>{'처음부터'}</Button>
      <p>{getResult(Hand, OtherHand)}</p>
      <div>
        <HandIcon value={Hand} />
        vs
        <HandIcon value={OtherHand} />
      </div>
      <HandButton value="rock" onClick={handleClick} />
      <HandButton value="scissor" onClick={handleClick} />
      <HandButton value="paper" onClick={handleClick} />
    </>
  )
}

export default App

가위바위보의 결과를 내는데 필요한 값을 가진 코드
-utils.js

const utils = {
  rock: 'scissor',
  scissor: 'paper',
  paper: 'rock',
}

export default utils

• 결과