[React]4. State 실습(주사위 게임)

React_04_주사위 게임(State, useEffect)

 

[실습 4]주사위 게임

 

[부트스트랩]

리액트 부트스트랩 홈페이지

https://react-bootstrap.netlify.app/

https://mui.com/

 

1. 부트스트랩 설치(terminal)

 

2. 부트스트랩 import

 

*프로젝트 전체에 부트스트랩 적용

 

3. 부트스트랩 css import

 

4. <button> 가져오기

 

[주사위 게임룰]

     Step1. '던지기' 버튼을 눌렀을 때 주사위의 모양 변경/유저의 선택/컴퓨터의 선택

         1-1)유저의 주사위 숫자가 랜덤으로 표시

         1-2)컴퓨터의 주사위 숫자도 랜덤으로 표시

         1-3)유저의 숫자/컴퓨터의 숫자가 이미지로 표시

 

      Step2. 유저와 컴퓨터의 숫자 결과 비교(useEffect)

         2-1)내가 이겼을 경우 나의 점수 +1

         2-2)컴퓨터가 이겼을 경우 컴퓨터의 점수 +1

 

      Step3. 먼저 점수가 5점이 되면 승리(useEffect)

         alert창으로 '당신의 승리입니다.', '당신의 패배입니다.' 출력

 

      Step4. Reset 버튼을 클릭 시 모든 내용 초기화

         -유저 점수, 컴퓨터 점수, 유저 선택, 컴퓨터 선택, 이미지 변화

 

     *state로 관리해야 하는 정보

      -주사위 숫자(유저, 컴퓨터): 랜덤숫자

      -점수(유저, 컴퓨터)

      -결과(승리/패배)

      -이미지 경로

 

     *useEffect로 관리할 정보

      -결과 문구, 점수(유저/컴퓨터)

 

 

 [App4.js]

1. Component 생성

 

2. State 사용

• State import: import React, { useState } from 'react'
• 사용자/컴퓨터 주사위 숫자

• 결과문구 

 

• 사용자/컴퓨터 점수

 

3. 랜덤 함수 선언

 

4. 양쪽의 주사위 숫자를 비교하여 점수(+1) 변경하고 resultText(승리/변경) 문구 변경

 

      

5. 던지기 버튼 클릭 시 로직: 사용자/컴퓨터 주사위 수를  랜덤 수로 변경

 

 

6. 리셋 버튼 클릭 시 로직: 주사위 숫자를 1로 초기화

 

 

7. Board 컴포넌트로 {name, score, dice} 전송

-사용자, 컴퓨터 컴포넌트 2개 생성하기

-사용자, 컴퓨터 점수와  주사위 숫자는 State 값으로 설정하기

 

 

8. 결과는 resultText값 출력하기

 

[Board.jsx]props로 name, dice, score 받아와서 출력하기

-이미지는 주사위 숫자에 맞춰 변경되도록 src에서 {dice}변수 설정하기

 

*오류: State 값을 변경 시 setState()를 사용하지 않고 = 대입 연산자를 사용한 경우