Web_React #24

210907
Web_React #24

---

• 주사위 게임 총점 계산, 기록 기능
  -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) // 주사위 눈 값을 위한 state
  const [sum, setSum] = useState(0) // 점수 합산을 위한 state

  const handleRollClick = () => {
    const nextNum = random(6) //1~6까지의 랜덤한 숫자를 가진다.
    setNum(nextNum)
    setSum(sum + nextNum) // 주사위 눈 값 더하기
  }

  const handleClearClick = () => {
    setNum(1)
    setSum(0) // 합 0으로 초기화
  }

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

export default App

1.총점 계산을 위한 state 생성
2.handleRollClick에서 랜덤한 주사위 값을 sum state 값에 더해지도록 설정
3.handleClearClick에서 sum의 값을 0으로 초기화
4.새로운 div태그 안에 요소 배치

던지기 클릭 시 눈의 값이 바뀌면서 해당하는 수 만큼 총점이 늘어난다.

처음부터 클릭 시 총점 0 및 눈 값 초기화

• 기록

-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) // 주사위 눈 값을 위한 state
  const [sum, setSum] = useState(0) // 점수 합산을 위한 state
  const [gameHistory, setGameHistory] = useState([])  // 점수 기록을 위한 배열 state

  const handleRollClick = () => {
    const nextNum = random(6) //1~6까지의 랜덤한 숫자를 가진다.
    setNum(nextNum)
    setSum(sum + nextNum) // 주사위 눈 값 더하기
    setGameHistory([...gameHistory, nextNum]) // 값 설정 
  }

  const handleClearClick = () => {
    setNum(1)
    setSum(0) // 합 0으로 초기화
    setGameHistory([])  // 빈 배열 전달
  }

  return (
    <div>
      <div>
        <Button onClick={handleRollClick}>던지기</Button>
        <Button onClick={handleClearClick}>처음부터</Button>
      </div>
      <div>
        <h2>나</h2>
        <Dice color="red" num={num} />
        <h2>총점</h2>
        <p>{sum}</p>
        <p>기록</p>
        <p>{gameHistory.join(', ')}</p>
      </div>
    </div>
  )
}

export default App

승부를 기록하기 위한 배열 state를 만들고 각 버튼 클릭 시 초기화는 빈 배열을 전달하고, 던지기 버튼의 경우에는 gameHistory의 값과 새로운 결과값을 넣은 배열을 새로 넣어준다.

• 가위바위보 승부 기록
  -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 [gameHistory, setGameHistory] = useState([])  // 게임 승부 결과 기록

  const handleClick = (value) => {
    setHand(value)
    const nextOtherHand = random(2)
    const nextHistoryItem = getResult(value,nextOtherHand)
    setOtherHand(nextOtherHand)
    setGameHistory([...gameHistory, nextHistoryItem])
  }
  const handleClearClick = () => {
    setHand('rock')
    setOtherHand('rock')
    setGameHistory([])  // 빈 배열로 초기화
  }

  return (
    <>
      <Button onClick={handleClearClick}>{'처음부터'}</Button>
      <div>
        <HandIcon value={Hand} />
        vs
        <HandIcon value={OtherHand} />
      </div>
      <div>
        <p>
          승부 기록 : {gameHistory.join(', ')}
        </p>
      </div>
      <HandButton value="rock" onClick={handleClick} />
      <HandButton value="scissor" onClick={handleClick} />
      <HandButton value="paper" onClick={handleClick} />
    </>
  )
}

export default App

이전 주사위 게임과 비슷한 방식으로 결과를 받아서 배열 state 에 넣어준다.

배열이나 객체와 같은 참조형 state를 사용할 때에는 메소드나 할당 연산자로 값을 변경하는 것이 아닌 반드시 새로운 값을 만들어 변경해야한다.

• state
  React.js 에서는 유동적인 데이터를 사용할 때 state를 사용한다.

1. 초깃값 설정 필수 -> this.state = {} or useState를 사용
2. state 값을 변경할 때 state를 직접 조작이 아닌 setState 메소드를 사용해야한다.
   state가 변경될 때 마다 변경된 부분을 감지 -> 리렌더링 -> setState메소드를 사용하지 않고 직접 수정시 변경을 감지 X -> 리렌더링 X