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

<알고리즘(순서)>

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

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

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

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

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

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

 

내가 선택한 값이 박스에 보여야 겠죠?

지금은 바위 버튼을 클릭해도 가위 그림 밖에 안나옴 ㅜ

 

UI가 바뀌게 되는 것을 하고 싶으면 State를 만들어라!

state를 만들어주는 리액트 훅 : useState

 

처음에 어떤 값이 들어있는지 모르니까 null로 써놓는다.

userSelect, state를 만들었다. state값이 변할때마다 UI가 변한다.

우리가 해줘야하는것: 내가 선택한 값으로 use Select의 값을 바꿔주어야 한다.

play라는 함에서 유저가 어떤 것을 선택했는지 알죠? - rock이면 rock, paper이면 paper....

userChoice: 내가 선택한 것

choice에서 userChoice(값을)를 가져온다.

function App() {
  const [userSelect, setUserSelect] = useState(null)
}
  const play=(userChoice)=>{
    userSelect = choice[userChoice]

 

마지막줄 에러! (이렇게 하면 UI가 변하지 않는다!)

state는 변수와는 다르다

변수에 값 바꾸는 것 처럼 (=쓰면) 하면 안된다.

state를 값을 바꾸려면 귀찮더라도 state를 바꿔주는 함수, 즉 set함수를 사용해야한다. 

 

<해결>

function App() {
  const [userSelect, setUserSelect] = useState(null)
}
  const play=(userChoice)=>{
    setUserSelect(choice[userChoice])

setUserSelect함를 통해서만 state값이 업데이트 될 수 있다.

setUserSelect 함수안에 내가 다시 할당하고 싶은것 을 넣어준다.

 

 

내가 선택한 값은 userSelect이다라는 것을 item에게 알려준다.

 

값이 제대로 넘어오는지 console.log를 이용해서 props를 확인(프린트)해보자!

 

 

이 item,객체 안에있는 이미지만 나오게 하면 된다.!

 

<에러>

.img라는게 정의가 안됐는데 어떻게 읽어와?

이 에러가 왜 생겼을까...?

 

item이란 속성이 You한테는 있지만 computer에게는 아직 없음.(computer에게 item이라는 객체를 넘겨준 적 없음)

App.js

item은 You(유저)에게만 있고 Computer에게는 없음

 

컴퓨터입장에서는 You를 그릴때에는 문제가 되지 않지만 Computer 박스를 그릴 때에는 문제가 생김

 

야... item이라는걸 안줬는데 어떻게 item을 가져와?

 

그래서... 잠시... command처리해주자!

 

그래도 아직 오류가 난다.

null의 속성값을 읽을 수 없다고?

이 에러가 왜 났을까?

 

 

userSelect 값이 언제 들어와요? 유저가 버튼을 선택했을 때! 유저가 선택하기 전에 처음 값은 null이다. 

 

Box 입장에선 처음에 UI를 그리긴 해야하는데... item은 null이고(없고).... "null을 나에게 줬는데 어떻게 img을 그리니...?"

 

"null을 나에게 줬는데 어떻게 img을 그리니...?"

 

 

 

선택한 값이 없어도 잘 나온다.

 

<정리?>

리액트는 다이나믹한 UI를 그려줘야 하다 보니까 우리가 리액트 컴포넌트의 어떤 props라고 다이나믹한 값을 넘겨주게 된다. 맨 처음에는 이 값이 setting이 안되어 있을 수도 있잖아요. 그런 경우를 대비해서 이 가드(props.item)를 사용한다. 

만약에 props.item이 없으면 , null이면 false가 리턴될거다. 앞이 false면 뒤는 자동으로 실행 X(왜냐하면 &&이기 때문) -> 최종적으로 실행 x

만약에 props.item이 있으면(유저가 남겨준 item이 있으면), null이 아니면 true가 되면서 item에 있는 image값을 불러오게 된다.

 

리액트에서 중요한것은! 주의해야할 것은!

가드값(props.item)을 넣어주어야 한다는것

 

props.title같은 경우에는 조건(가드가)이 필요 없다. 

 

얘는 맨처음부터 주는 값이 정해져 있다. 

 

근데 userSelect값은 다이나믹하다. 내가 선택하기 전엔 null이다. (값이 아얘 없다)

 

상황에 맞춰서 에러 방지를 위해 조건(가드-props.item)을 써야한다.

 

<결과>