리액트 41~45강 정리

메소드 안에서 함수를 호출할때

<button id="rock" className="btn" onClick={() => this.onClickBtn('바위')}>바위</button>

 

() => 이부분을 가져다가

 

// 변경 이전
onClickBtn = (choice) => {...

// 변경 후
onClickBtn = (choice) => () => {...

 

 

이렇게 바꿔준다. 리액트에서 많이 쓰는 패턴.

 

***괄호안에 e 를 써서 사용하는 경우에 사용하기도 함.

 

Hooks에는 라이프사이클 메소드가 없음.

 

Hooks의 라이프사이클이 없지만, 흉내를 낼 수 있음.

 

**클래스의 경우 componentDidMount나 componentDidUpdate에서 모든 state를 조건문으로 분기 처리한다.

 

 

 

//Hooks형

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

//                           result, imgCoord, score
// componentDidMount
// componentDidUpdate
// componentwillUnmount 
// 클래스에서는 각 메소드가 3개의 state들을 다 조작 가능하다. 
// 훅스에서는 useEffect 하나가 result, imgCoord, score 중 하나 혹은 2개 혹은 다 조작 가능. 아래와 같은 식으로
// useEffect(() => {
//     setImgCoord();
//     setScore();
// }, [imgCoord, score]);
// useEffect(()=> {
//     setResult();
// }, [result]);


// 실행순서
// 클래스의 경우  -> constructor -> render -> ref -> componentDidMount -> (setState/props 바뀔때) -> shouldComponentUpdate  -> render -> componentDidUpdate
// 부모가 나를 없앴을때 -> componentWillUnmount -> 소멸

const rspCoords = {
    바위: '0',
    가위: '-142px',
    보: '-284px',
};

const scores = {
    가위: 1,
    바위: 0,
    보: -1,
};

//컴퓨터가 어느손 내고 있는지 판단
const computerChoice = (imgCoord) => {
    return Object.entries(rspCoords).find(function(v) {
        return v[1] === imgCoord;
    })[0];
};

const RSP = () => {
    const [result, setResult] = useState('');
    const [imgCoord, setImgCoord] = useState(rspCoords.바위);
    const [score, setScore] = useState(0);
    const interval = useRef();

    
    useEffect(() => {    // componentDidMount, componentDidUpdate 역할(1대1 대응은 아님)
        interval.current = setInterval(changeHand, 100);
        return () => {   //componentWillUnmount 역할
            clearInterval(interval.current);
        }
    }, [imgCoord]);  // 두번째 인수 배열에 넣은 값들이 바뀔 때 마다 useEffect가 실행된다. setInterval이 시작됬다가 claerInterval됫다가를 반복, 매번 clearInterval을 하기 때문에 그냥 setTimeout하는것과 동일

    const changeHand = () => {
        if(imgCoord === rspCoords.바위) {
            setImgCoord(rspCoords.가위);
        } else if(imgCoord === rspCoords.가위) {
            setImgCoord(rspCoords.보);
        } else if (imgCoord === rspCoords.보) {
            setImgCoord(rspCoords.바위);
        }
    };

    const onClickBtn = (choice) => () => {
        clearInterval(interval.current);
        const myScore = scores[choice];
        const cpuScore = scores[computerChoice(imgCoord)];
        const diff = myScore - cpuScore;
        if(diff === 0){
            setResult('비겼습니다');
        } else if([-1, 2].includes(diff)) {
            setResult('이겼습니다!');
            setScore((prevScore) => prevScore + 1);
        } else {
            setResult('졌습니다!');
            setScore((prevScore) => prevScore - 1);
        }
        setTimeout(()=> {
            interval.current = setInterval(changeHand, 100);
        }, 1000);
    }

    return (
        <>
            <div id="computer" style={{background: `url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ${imgCoord} 0` }} />
            <div>
                <button id="rock" className="btn" onClick={onClickBtn('바위')}>바위</button>
                <button id="scissor" className="btn" onClick={onClickBtn('가위')}>가위</button>
                <button id="paper" className="btn" onClick={onClickBtn('보')}>보</button>
            </div>
            <div>{result}</div>
            <div>현재 {score}점</div>
        </>
    );
}

export default RSP;