2019 1월 10일 수업(React가위바위보, GraphQL)

패스트캠퍼스

2019 1월 10일 수업(React가위바위보, GraphQL)

sunnykim91 2020. 1. 10. 16:54

React 가위바위보 게임 구현하기

Math.random은 안전하지 않은 난수발생 값이다. 그렇기 때문에 어떤 주요한 키값을 만들때 사용하는것은 권하지 않는다. 즉, 안정성이 필요하지 않은 난수발생을 위한 함수이다.

최저값~최대값 사이의 정수를 난수로

=> 최저값 + Math.floor(Math.random() * (최고값 - 최저값)

0~2까지의 난수 발생

Math.floor(Math.random() * 2) // 0, 1, 2 중에 랜덤으로 나옴.

redux는 type명을 대문자로

useReducer는 type명을 대문자 소문자 상관 없음

import React, { useState, useEffect, useRef, useReducer } from 'react';

const reducer = (state, action) => {
  const data = state.history;

  switch (action.type) {
    case 'ADD':
      return {
        ...state,
        history: !data ? [action.newGame] : [...data, action.newGame]
      };
    case 'RESULT':
      let _comWin, _youWin;
      console.log(action.whoWins);
      console.log(state.comWin);
      if (action.whoWins === 'computer') {
        _comWin = state.comWin ? parseInt(state.comWin) + 1 : 1;
        _youWin = state.youWin;
      }
      if (action.whoWins === 'you') {
        _comWin = state.comWin;
        _youWin = state.youWin ? parseInt(state.youWin) + 1 : 1;
      }
      if (action.whoWins === 'draw') {
        _comWin = state.comWin;
        _youWin = state.youWin;
      }
      return {
        ...state,
        comWin: _comWin,
        youWin: _youWin
      };
    case 'RESET':
      return {};
  }
};

const Rsp = () => {
  const [pick, setPick] = useState(null);
  const [mypick, setMypick] = useState(null);
  const [who, setWho] = useState(null);

  const myPickRef = useRef(null);

  const [state, dispatch] = useReducer(reducer, {});

  const runGame = val => {
    const items = ['가위', '바위', '보'];
    const ranIdx = Math.floor(Math.random() * items.length);
    setPick(items[ranIdx]);
    setMypick(val);
  };

  useEffect(() => {
    // pick 컴터 , mypick 내가 누른거
    let whoWins = '';
    if (pick === '가위') {
      if (mypick === '가위') {
        whoWins = 'draw';
      }
      if (mypick === '바위') {
        whoWins = 'you';
      }
      if (mypick === '보') {
        whoWins = 'computer';
      }
    } else if (pick === '바위') {
      if (mypick === '가위') {
        whoWins = 'computer';
      }
      if (mypick === '바위') {
        whoWins = 'draw';
      }
      if (mypick === '보') {
        whoWins = 'you';
      }
    } else {
      if (mypick === '가위') {
        whoWins = 'you';
      }
      if (mypick === '바위') {
        whoWins = 'computer';
      }
      if (mypick === '보') {
        whoWins = 'draw';
      }
    }

    if (whoWins) {
      setWho(whoWins);
      dispatch({
        type: 'ADD',
        newGame: `${whoWins}, 컴 : ${pick}, 나 : ${mypick}`
      });
      dispatch({ type: 'RESULT', whoWins });
    }
  }, [pick, mypick]);

  useEffect(() => {
    console.log(who);
  }, [who]);

  const handleSelectChange = () => {
    const val = myPickRef.current.value;
    runGame(val);
  };

  const { history, comWin, youWin } = state;

  return (
    <div>
      {comWin || 0} : {youWin || 0}
      <select ref={myPickRef} onChange={handleSelectChange}>
        <option value='가위'>가위</option>
        <option value='바위'>바위</option>
        <option value='보'>보</option>
      </select>
      <button onClick={() => dispatch({ type: 'RESET' })}>초기화</button>
      {history && history.map((h, index) => <h2 key={index}>{h}</h2>)}
    </div>
  );
};

export default Rsp;