1. 가위바위보 게임 (5)

<알고리즘(순서)>

1. 박스 2개 (타이틀,사진,결과)

2. 가위 바위 보 버튼이 있다.

3. 버튼을 클릭하면 클릭한 값이 박스에 보인다.

4. 컴퓨터는 랜덤하게 아이템 선택이 된다.

5. 3,4의 결과를 가지고 누가 이겼는지 승패를 따진다.

6. 승패 결과에 따라 (박스의) 테두리 색이 바뀐다. (이기면 - 초록, 지면 - 빨강, 비기면 - 검정)

 

 

근데 내가 바위를 선택했는지 어떻게 알지?

내가 뭘 선택했는지 알아야 할 것 아니야...!

내가 무엇을 선택했는지 알려주기 위해서 

 

매개변수를 추가함!

userChoice: 유저가 선택한 초이스

 

아무것도 안했는데 페이지를 실행시키니까 자동으로 값이 출력됨...

 

[이유]

주의사항!

UI안에 함수가 있으면 자동으로 값을 실행시킴(play():함수를 실행시킴)

[해결]

함수 안에 콜백함수 형태로 함수 안에 넣어주어야 함(함수를 전달해주어야 함)

onClick={() => play()}

 

초기에 아무것도 출력되지 않는다.

 

가위를 눌렀다.

 

바위를 눌렀다.

 

보를 눌렀다.

-- 아까처럼 클릭도 안했는데 프린트 되는 경우는 사라짐!

 

<<주의할 점>>

-- onClick을 할 때에는 함수를 호출하는 문장을 넣어주는 것이 아니라 함수를 (전달하는 형식으로)콜백함수로 넣어주어야 한다.