TIL) 스파르타 개발일지 22-12-07

가위 바위 보 게임을 리액트로 만들어보았다.

<button onClick={() => play("scissors")}>가위</button>
<button onClick={() => play("rock")}>바위</button>
<button onClick={() => play("paper")}>보</button>
//함수를 실행시킬 때 에는 {() = > play()} 콜백 함수처럼 전달하는 형식으로 안에 넣어줘야한다

과정

1. 내가 선택할 수 있는 가위, 바위, 보 btn 세개

2.선택한 btn을 보여줄 수 있는 박스 두 개(내가 선택한 것, 컴퓨터)

3. 내가 선택한 btn에 알맞는 화면출력.

4. btn click시 컴퓨터는 랜덤한 값을 화면에 출력.

5. (3), (4)의 결과를 가지고 승자를 따짐.

6. 승패의 결과에 따라 출력되는 박스의 테두리의 색이 변경 (이기면 : 초록, 지면 : 빨강, 비기면 : 노랑)

 

버튼에 따라 해당 선택 값이 출력될 수 있는 박스 두개와  선택버튼 구현. 

2번까지 진행.