State 만들기

import { useCallback, useEffect, useState } from 'react'

const Rock = ()=>{
  const [myturn,setMyturn] = useState('')
  const [comturn,setComturn] = useState('')
  const [win,setWin] = useState('')

출력

return (
	<div className="container">
	  <h1>가위바위보</h1>
	  <div className='btns'>
	    <button value="가위" onClick={onClick}>가위</button>
	    <button value="바위" onClick={onClick}>바위</button>
	    <button value="보" onClick={onClick}>보</button>
	  </div>
	  
	  <div className='RSP'>
	    <div className="myturn">
	      {myturn==="보"?<img src='https..':""}
	      {myturn==="가위"?<img src='https..':""}
	      {myturn==="바위"?<img src='https..':""}
	      <h1>나:{myturn}</h1>
	    </div>
	    <div className="comturn">
	      {myturn==="보"?<img src='https..':""}
	      {myturn==="가위"?<img src='https..':""}
	      {myturn==="바위"?<img src='https..':""}
	      <h1>컴퓨터:{comturn}</h1>
	    </div>
	  </div>
	      <h1 className={`${win}`}>{win}</h1>
	</div> 
)

• onclick 하면 value 값에 대한 값을 참조가능하다.

  const onClick = (e)=>{
    const RSP = ["가위","바위","보"]
    var randomNum = Math.floor(Math.random()*3)
    setMyturn(e.target.value)
    setComturn(RSP[randomNum])
  }

함수

const whoWin = useCallback(()=>{
  if (comturn===myturn){
    setWin("draw")
  }
  else if ((comturn==="가위" & myturn==="보")|
      (comturn==="바위"&myturn==="가위")|
      (comturn==="보" & myturn==="바위") ){
    setWin("lose")
  }
  else if((myturn==="가위" & comturn==="보")|
  (myturn==="바위"&comturn==="가위")|
  (myturn==="보" & comturn==="바위") ){
    setWin("win")
  }
},[myturn,comturn])

useEffect(()=>{
  console.log(myturn,comturn)
  whoWin()
},[myturn,comturn,whoWin])
	...
}

• whoWin 함수 ⇒ useCallback 을 사용해서 myturn이나 comturn이 바뀌게 되면 실행되게 한다. ⭐ whoWin을 사용하는 곳에서 useEffect를 사용했기 때문에 useCallback을 사용해야한다.
  
• useEffect로 [myturn,comturn,whoWin]이 변하게 되면 위의 함수를 실행시키게된다. ⭐ useEffect를 사용했기 때문에 state가 계속 변할 수 있었다.