05 가위바위보

import React, { useState, useRef, useEffect } from 'react';
import useInterval from './useInterval';



const RPS = () => {
    const [computer, setComputer] = useState('rock');
    const [user, setUser] = useState();
    const [result, setResult] = useState();
    const [running, setRunning] = useState(true);
    //const interval = useRef();

    const changeHand = () => {
        setComputer(prevComputer => {
            if (prevComputer === 'rock') {
                return 'paper';
            } else if (prevComputer === 'paper') {
                return 'scissors';
            } else if (prevComputer === 'scissors') {
                return 'rock';
            }
        });
    }

    const logic = (computer, user) => {
        if (computer === user) { return 0; }
        else if (user === 'rock' && computer === 'scissors'
            || user === 'paper' && computer === 'rock'
            || user === 'scissors' && computer === 'paper') {
            return 1;
        } else {
            return -1;
        }
    }

    const onClickBtn = (user) => () => {
        //clearInterval(interval.current);
        setRunning(false);
        setUser(user);
        // console.log("computerVal - " + computer);
        // console.log("user - " + user);
        const resultNum = logic(computer, user);
        if (resultNum === -1) {
            setResult('졌습니다');
        } else if (resultNum === 0) {
            setResult('비겼습니다');
        } else {
            setResult('이겼습니다.');
        }
        //     setTimeout(interval.current = setInterval(() => { changeHand() }, 1000), 2000)
        setTimeout(() => { setRunning(true) }, 2000)
    }

    // useEffect(() => {
    //     interval.current = setInterval(() => { changeHand() }, 1000);
    //     console.log('다시실행')
    //     return () => { //componentWillUnmount
    //         console.log('종료')
    //         clearInterval(interval.current);
    //     }
    // }, [])


    useInterval(changeHand, running ? 1000 : null);

    return (
        <>
            <div id="RPS">
                <h3>가위바위보</h3>
                <div className={`computer ${computer}`}>

                </div>
                <div className="btn-group">
                    <button onClick={onClickBtn('scissors')}>가위</button>
                    <button onClick={onClickBtn('rock')}>바위</button>
                    <button onClick={onClickBtn('paper')}>보</button>
                </div>

                <div>{result}</div>
            </div >
        </>
    )
}

export default RPS;

 

 

import { useRef, useEffect } from 'react';


/* 
#사용시
    const [running, setRunning] = useState(true);
    useInterval(()=>{
        // console.log('a')
    }, running ? 1000 : null )
    
    1000이 아닌 null 입력시 뭠춤

#코드 설명
    callback 부분이 실제로 실행을 할 코드  ()=>{console.log('a')}
    savedCallback이라는 ref에 저장을 해둠. (ref에 저장하면 항상 최신 코드를 참조가능 - )
    null이면 이전에 반환했던 ()=>{clearInterval()} 함수안의 clearInterval이 실행이 되서 뭠춤.
*/

function useInterval(callback, delay) {
    const savedCallback = useRef();

    useEffect(() => {
        savedCallback.current = callback; //여기에 callback을 저장을 해둠
    });
    useEffect(() => {
        function tick() {
            savedCallback.current(); //callback의 (코드) 실행.
        }
        if (delay !== null) {
            let id = setInterval(tick, delay);
            return () => clearInterval(id);
        }

    }, [delay])

    return savedCallback.current;
}

export default useInterval;